2022.4.6 结构伪类选择器

结构伪类选择器

伪类：在选择器后面加上一些条件 形式： 标签名:

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  ​
 7      <style>
 8          /*ul li标签的第一个子元素修改样式*/
 9          ul li:first-child{
10              background: green;
11          }
12          /*ul li标签的最后一个子元素修改样式*/
13          ul li:last-child{
14              background: red;
15          }
16  ​
17          /*选中p1 :定位到父元素，选择当前的第一个元素
18          nth-child(x):选择当前p元素的父级元素，选中父级元素的第x个子元素，并且是p标签才生效!否则不生效*/
19          p:nth-child(5){
20              background: yellow;
21          }
22          /*nth-of-type(x)：选中父元素下的第x个p元素*/
23          p:nth-of-type(2){
24              background: #5dff4c;
25          }
26          /*鼠标移到上面有背景颜色*/
27          a:hover{
28              background: aqua;
29          }
30  ​
31      </style>
32  ​
33  </head>
34  <body>
35  ​
36      <p>p1</p>
37      <p>p2</p>
38      <p>p3</p>
39      <!--  无序列表 算body的第4个子元素-->
40      <ul>
41          <li>例1</li>
42          <li>例2</li>
43          <li>例3</li>
44      </ul>
45  <!--    算body的第5个子元素- -->
46      <p>p4</p>
47      <a href="">鼠标移到上面有特效</a>
48  </body>
49  </html>

 

 

 

posted @ 2022-04-07 17:24  暴躁C语言  阅读(29)  评论(0)    收藏  举报