結構偽類選擇器

ul的第一個子元素

/*ul的第一個子元素*/
   ul li:first-child{
    background: #4a78c2;
   }

ul的最後一個子元素

/*ul的最後一個子元素*/
   ul li:last-child{
    background: #c3d23b;
   }

定位到父元素，選擇當前的第n個元素，順序

/*選中p2 : 定位到父元素，選擇當前的第二個元素
   選擇當前p元素的父級元素，選中父級元素的第一個，並且是當前元素才生效，順序
   */
   p:nth-child(3){   /*p:nth-child(1)不行，因為是h1不是p*/
    background: crimson;
   }

選中父元素下的p元素的第n個，型別

/*選中父元素下的p元素的第一個，型別*/
   p:nth-of-type(1){
    background: chocolate;
   }

程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>

 <!-- 避免使用，class，id選擇器 -->
 <style>
  /*ul的第一個子元素*/
  ul li:first-child{
   background: #4a78c2;
   }

  /*ul的最後一個子元素*/
  ul li:last-child{
   background: #c3d23b;
   }

  /*選中p2 : 定位到父元素，選擇當前的第一個元素
   選擇當前p元素的父級元素，選中父級元素的第一個，並且是當前元素才生效，順序
   */
  p:nth-child(3){  /*p:nth-child(1)不行，因為是h1不是p*/
   background: crimson;
   }

  /*選中父元素下的p元素的第一個，型別*/
  p:nth-of-type(1){
   background: chocolate;
   }

  /*a:hover{
    background: black;
   }*/

 </style>

</head>
<body>

<!-- <a href="">123</a> -->
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>li1</li>
 <li>li2</li>
 <li>li3</li>
</ul>

</body>
</html>

CSS（3）結構偽類選擇器

結構偽類選擇器

CSS（3）結構偽類選擇器

CSS結構偽類選擇器

css - 01結構偽類選擇器

CSS中的focus-within偽類選擇器

CSS3:CSS3中的結構偽類選擇器

7.結構偽類選擇器

2022.4.6 結構偽類選擇器

結構偽類選擇器

WEB前端初學者筆記（8）--偽類選擇器

JAVA——完成下面父類及子類的宣告。（1）宣告Student類（2）宣告StudentXW類為Student的子類（3）宣告StudentBZ類為Student的子類

CSS----偽元素和偽類選擇器----結構性偽類

css中的偽類選擇器

CSS偽類選擇器實現三角形

2、前端--初見前後端互動、CSS簡介、基本選擇器、組合選擇器、屬性選擇器、分組與巢狀、偽類選擇器

css偽類選擇器匹配第N個li元素

（3）函式之迭代器、生成器、面向過程程式設計

偽類選擇器

after偽類選擇器寫箭頭

HTML[2種特殊選擇器]_偽類選擇器&屬性選擇器

前端基礎HTML---偽類選擇器

CSS（3）結構偽類選擇器

結構偽類選擇器

相關推薦