js进阶 10-9 -of-type型子元素伪类选择器

一、总结

一句话总结：三种和first、last等有关的选择器。

1、:first和:first-child和:first-of-type的区别？

:first：单选。:first-child：多选（父元素第一个）。:first-of-type:多选（同类型第一个）；

:first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）；“:first-child”是选择父元素下的第1个子元素（不区分元素类型）

二、-of-type型子元素伪类选择器

1、相关知识

子元素伪类选择器

    • ：first-child选择父元素的第1个子元素
    • ：last-child选择父元素的最后1个子元素
    • ：nth-child(n)选择父元素下的第n个元素或奇偶元素，n的值为"整数|odd|vevn
    • ：only-child选择父元素中唯一的子元素（该父元素只有一个子元素）
    • ：first-of-type选择同元素类型的第1个同级兄弟元素
    • ：last-of-type选择同元素类型的最后1个同级兄弟元素
    • ：nth-of-type选择同元素类型的第n个同级兄弟元素，n的值可以是"整数|odd|even"
    • ：onlt-of-type匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

     </style>

 </head>

 <body>

      <div>

         <h1>h1</h1>

         <p>p1</p>

         <p>p2</p>

         <span>span1</span>

         <span>span2</span>

      <ul>

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

         <li>5</li>

         <li>6</li>

         <li>7</li>

         <li>8</li>

         <li>9</li>

      </ul>

     </div>

      <script>

          // $('li:nth-child(3n)').css("background-color", "red")

          // $('h1:first-child').css("background-color", "red")

          //选择择不到任何元素，p、span并不是div的第1个子元素

          // $('p:first-child').css("background-color", "blue")

          // $('span:first-child').css("background-color", "blue")

          //“:first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）；“:first-child”是选择父元素下的第1个子元素（不区分元素类型）

          $('h1:first-of-type').css("background-color", "red")

          $('p:first-of-type').css("background-color", "red")

          $('span:first-of-type').css("background-color", "red")

      </script>

 </body>

 </html>
 
 

js进阶 10-9 -of-type型子元素伪类选择器的更多相关文章

  1. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  2. js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

  3. js进阶 11-7 jquery如何获取和改变元素的位置

    js进阶 11-7  jquery如何获取和改变元素的位置 一.总结 一句话总结:jquery中匿名函数中的index参数是什么意思.jquery对象多集合,故index为所选元素的下标. 1.jqu ...

  4. js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

    js进阶 10-10  可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是  四个  包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...

  5. js进阶 10-7 简单的伪类选择器可以干什么

    js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...

  6. js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

  7. js进阶 10-11/12 表单伪类选择器的作用

    js进阶 10-11  表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...

  8. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  9. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

随机推荐

  1. Akka边学边写（4）-- MiniRPG

    前面几篇文章用Akka写了HelloWorld和EchoServer,为了更进一步学习Akka,本文将会实现一个非常小的RPG游戏server:MiniRPG. 游戏逻辑 由于是迷你RPG,所以逻辑非 ...

  2. WEB安全实战（二）带你认识 XSS 攻击

    前言 上一篇文章写了关于 WEB 安全方面的实战,主要是解决 SQL 盲注的安全漏洞.这篇文章本来是要写一篇关于怎样防治 XSS 攻击的,可是想来想去,还是决定先从理论上认识一下 XSS 吧.下一篇文 ...

  3. setting-在设置中添加新的选项

    如下图的“通知栏调出方式” 具体实现如下 1.在 res/xml/settings_headers.xml 文件中添加如下内容 <preference-headers xmlns:android ...

  4. libcurl 上传文件至 web服务器

    测试环境搭建, 使用 wamp server (windows下的 apache+MySQL+php) libcurl vc6 工程代码  下载地址:  http://download.csdn.ne ...

  5. js常用数据转换&判断

    数组转字符串 var a, b; a = new Array(0,1,2,3,4); b = a.join("-"); //"0-1-2-3-4" 字符串转数组 ...

  6. C#中对XML的操作

    现在有一个xml文件,名称:BookStore.xml,数据如下: <?xml version="1.0" encoding="gb2312"?>& ...

  7. 日志系统之基于Zookeeper的分布式协同设计

    近期这段时间在设计和实现日志系统.在整个日志系统系统中Zookeeper的作用非常重要--它用于协调各个分布式组件并提供必要的配置信息和元数据.这篇文章主要分享一下Zookeeper的使用场景. 这里 ...

  8. regexp模式匹配+location页面跳转+cookie/localstorage本地存储

    学习js的过程中,根据知识点编写一些code进行测试,以便检验. 这段程序使用了以下知识点: 1.regexp,对数据进行模式匹配 2.使用location对象进行页面跳转. 3.cookie/loc ...

  9. POJ 3723 Conscription MST

    http://poj.org/problem?id=3723 题目大意: 需要征募女兵N人,男兵M人,没征募一个人需要花费10000美元,但是如果已经征募的人中有一些关系亲密的人,那么可以少花一些钱, ...

  10. 自旋锁spinlock解析

    1 基础概念 自旋锁与相互排斥锁有点类似,仅仅是自旋锁不会引起调用者睡眠.假设自旋锁已经被别的运行单元保持.调用者就一直循环在那里看是否该自旋锁的保持者已经释放了锁."自旋"一词就 ...