2022.4.6 层次选择器

层次选择器

 

1、后代选择器

在某个元素的后面 祖爷爷 爷爷 爸爸 你

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>index</title>
 6  ​
 7      <style>
 8          /*后代选择器：body后代的p标签样式*/
 9          body p{
10              background: red;
11          }
12      </style>
13  ​
14  </head>
15  <body>
16  ​
17    <p>p1</p>
18    <p>p2</p>
19    <p>p3</p>
20  <!--  无序列表-->
21    <ul>
22      <li>
23          <p>p4</p>
24      </li>
25      <li>
26          <p>p5</p>
27      </li>
28      <li>
29          <p>p6</p>
30      </li>
31    </ul>
32  ​
33  </body>
34  </html>

 

 

2、子选择器

下一代的标签

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>index</title>
 6  ​
 7      <style>
 8       /*子选择器：body下一代的p标签样式*/
 9          body>p{
10              background: green;
11          }
12  ​
13      </style>
14  ​
15  </head>
16  <body>
17  ​
18    <p>p1</p>
19    <p>p2</p>
20    <p>p3</p>
21  <!--  无序列表-->
22    <ul>
23      <li>
24          <p>p4</p>
25      </li>
26      <li>
27          <p>p5</p>
28      </li>
29      <li>
30          <p>p6</p>
31      </li>
32    </ul>
33  ​
34  </body>
35  </html>

 

 

3、相邻兄弟选择器

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>index</title>
 6      <style>
 7          /*相邻兄弟选择器  名为name3的p标签下面的一个p标签修改样式*/
 8          .name3 + p{
 9              background: yellow;
10          }
11  ​
12      </style>
13  ​
14  </head>
15  <body>
16  ​
17    <p>p1</p>
18    <p class="name3">p2</p>
19    <p>p3</p>
20  <!--  无序列表-->
21    <ul>
22      <li>
23          <p>p4</p>
24      </li>
25      <li>
26          <p>p5</p>
27      </li>
28      <li>
29          <p>p6</p>
30      </li>
31    </ul>
32  ​
33  </body>
34  </html>

 

 

4、通用兄弟选择器

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>index</title>
 6  ​
 7      <style>
 8          /*通用兄弟选择器  同级别都变：名为name3的p标签下面的所有同级p标签修改样式 */
 9          .name3~p{
10              background: blue;
11          }
12  ​
13  ​
14      </style>
15  ​
16  </head>
17  <body>
18  ​
19    <p>p1</p>
20    <p class="name3">p2</p>
21    <p>p3</p>
22    <p>p4</p>
23  <!--  无序列表-->
24    <ul>
25      <li>
26          <p>p4</p>
27      </li>
28      <li>
29          <p>p5</p>
30      </li>
31      <li>
32          <p>p6</p>
33      </li>
34    </ul>
35  ​
36  </body>
37  </html>

 

 

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