选择器的结构关系「建议收藏」

全栈程序员-站长 • 2022年4月21日上午8:20 • 未分类 • 阅读 35

大家好，又见面了，我是你们的朋友全栈君。

 1 <!doctype html>
 2 <html lang="en">
 3      <head>
 4          <meta charset="UTF-8">
 5          <meta name="Generator" content="EditPlus®">
 6          <meta name="Author" content="">
 7          <meta name="Keywords" content="">
 8          <meta name="Description" content="">
 9          <title>Document</title>
10          <style type="text/css">
11              /* .box1 .txt1 .tnt1{
12                 background:red;
13             } */
14             /* .box1 .tnt1{
15                 background:red;
16             } */
17             .box1 .tnt1{
    
    
18                 font-size:36px; 
19             }
20             .box1>span{
    
    
21                 background:red;
22             }
23             .box1,.txt1,.tnt1{
    
    
24                 border:1px solid red;
25             }
26             div.txt1{
    
    
27                 background:pink;
28             }
29             .box1 + span{
    
    
30                 font-size:30px;
31             }
32          </style>
33     </head>
34     <body>
35         <!--
36             标签有不同结构,所以选择器同理;
37             并列(兄弟)关系  嵌套(父子)关系;
38             1.包含选择器: 选中后代,可以跨越多级.{.box span(选中所有span标签)};
39             2.子集选择器: 选中儿子, 不能跨越多级; .box>span(选中佩奇爸爸);
40             3.群组选择器: 多个选择器选择到一组, 用逗号隔开; {(同时选择多个选择器名用逗号隔开)作用是同时对多个标签起作用};
41             4.复合选择器: 需要标签同时满足两个选择器的条件才能满足;{(div.txt1)选中我是佩奇妈妈};
42             5.毗邻选择器: 选择某个元素紧挨着的下一个兄弟元素; {(.box1+span)选中我是佩奇爷爷}; 
43         -->
44          <div class="box1">
45             <p class="txt1">
46                 我是佩奇妈妈;
47                 <span class="tnt1">小猪佩奇一号</span>
48                 <span>小猪佩奇二号</span>
49                 <span>小猪佩奇三号</span>
50                 <span>小猪佩奇四号</span>
51             </p>
52             <span>佩奇爸爸来了!</span>
53         </div>
54         <span>佩奇爷爷来了!</span> </br>
55         <div class="txt1">我是佩奇妈妈！</p>
56     </body>
57 </html>