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型子元素伪类选择器

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

一、总结

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

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

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

1、相关知识

2、代码

最新文章

热门文章