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. 10.Maven依赖排除 禁止依赖传递 取消依赖的方法

    转自:https://www.cnblogs.com/duanxz/p/6084494.html 大家都知道Maven的优点是依赖管理,特别是前期使用ANT的开发者都有很多感触.最近要开发一个java ...

  2. 96.udp通信

    运行截图 客户端 创建客户端套接字,用于创建UDP通信 SOCKET socket_client; 创建UDP通信 socket_client = socket(AF_INET, SOCK_DGRAM ...

  3. 1.3 Quick Start中 Step 2: Start the server官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 2: Start the server Step : 启动服务 Kafka ...

  4. ORA-01665 control file is not a standby control file

    ORA-01665错误处理 问题描述: 在备库启动至mount状态时,报如下错误: ORA-01665: control file is not a standby control file 解决办法 ...

  5. 【Codeforces Round #431 (Div. 2) C】From Y to Y

    [链接]点击打开链接 [题意] 让你构造一个大小最多为10W的字符multiset. 你进行n-1次操作; 每次操作,从set中取出两个字符串,一开始单个字符被认为是字符串. 然后把它们连接在一起. ...

  6. [置顶] WebService学习总结（4）——第三方webService服务调用

    互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示,下面就以获取天气预报数据和查询国内手机号码归属地为 ...

  7. java线程——三种创建线程的方式

    前言 线程,英文Thread.在java中,创建线程的方式有三种: 1.Thread 2.Runnable 3.Callable 在详细介绍下这几种方式之前,我们先来看下Thread类和Runnabl ...

  8. iOS开发RunLoop学习：一：RunLoop简单介绍

    一:RunLoop的简单介绍 #import "ViewController.h" @interface ViewController () @end @implementatio ...

  9. 使用 STL 辅助解决算法问题

    不要重复制造轮子,而且你造的轮子未必比得上别人的: <numeric>⇒ accumulate,累积容器中区间的和,可以指定初值: 为什么 STL 中的容器和算法一定关于区间的操作一定是左 ...

  10. （转）ORA-00257归档日志写满的解决方法

    转自:http://www.cnblogs.com/xwdreamer/p/3804509.html 背景: 在前一篇博客中我们提到了如何启动或关闭oracle的归档(ARCHIVELOG)模式,在我 ...