css复合选择器

css复合选择器

1.后代选择器(重点)

  •  后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>后代选择器</title>
 7     <style>
 8         div {
 9             /* 所有div标签的文字变成红色 */
10             color: red;
11         }
12 
13         div p {
14             /* 只让div下的p标签的文字变为紫色 */
15             /* 此时的p一定是div的孩子 */
16             /* 中间用空格隔开 */
17             color: blue;
18         }
19 
20         .one p {
21             /* 只让类名为one的div下的p标签的文字变为巧克力色 */
22             color: chocolate;
23         }
24 
25         #one p {
26             /* 只让id为one的div下的p标签的文字变为magenta */
27             color: magenta;
28         }
29 
30         .one #two {
31             color: darkgreen;
32         }
33 
34         #one #three {
35             color: deepskyblue;
36         }
37 
38         ul li {
39             color: aqua;
40         }
41     </style>
42 </head>
43 
44 <body>
45     <div>后代选择器hello</div>
46     <div>后代选择器hello</div>
47 
48     <div>
49         <p>后代选择器world</p>
50     </div>
51 
52     <div class="one">
53         <p>后代选择器 .one p</p>
54         <p id="two">后代选择器 .one #two</p>
55     </div>
56 
57     <div id="one">
58         <p>后代选择器 #one p</p>
59         <p id="three">后代选择器 #one #three</p>
60     </div>
61 
62     <div>后代选择器hello</div>
63     <div>后代选择器hello</div>
64 
65     <ul>
66         <li>苹果</li>
67         <li>橘子</li>
68         <li>香蕉</li>
69         <li>樱桃</li>
70     </ul>
71 
72     <ol>
73         <li>苹果</li>
74         <li>橘子</li>
75         <li>香蕉</li>
76         <li>樱桃</li>
77     </ol>
78 </body>
79 
80 </html>

运行结果

2.子代选择器(理解)

  • 子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个">"进行连接
  •  比如：  .demo > h3 {color: red;}   说明  h3 一定是类选择器demo的亲儿子。  demo元素包含着h3。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>子代选择器</title>
 7     <style>
 8         ul li a {
 9             /* ul li下的所有a标签变为红色 */
10             color: red;
11         }
12 
13         ul li>a {
14             /* 让儿子级别的a标签变为绿色 */
15             color: green;
16         }
17     </style>
18 </head>
19 
20 <body>
21     <ul>
22         <li>
23             <a href="#">儿子级别</a>
24              <!--此div是儿子级别-->
25             <div>
26                 <a href="#">孙子级别</a>
27                 <a href="#">孙子级别</a>
28                 <a href="#">孙子级别</a>
29             </div>
30         </li>
31     </ul>
32 </body>
33 
34 </html>

运行结果:

3.交集选择器(理解)

  • 交集选择器由两个选择器构成，其中第一个为标签选择器或者id选择器，第二个为类选择器，两个选择器之间不能有空格.
  • 如 : div#one(标签选择器+id选择器)   div.two(标签选择器+id选择器)
  • 交集选择器 是 并且的意思。 即...又...的意思
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>交集选择器</title>
 7     <style>
 8         .intersection {
 9             color: deepskyblue;
10         }
11 
12         #custom-red.intersection {
13             color: red;
14         }
15 
16         a.intersection {
17             color: deeppink;
18         }
19     </style>
20 </head>
21 
22 <body>
23     <div id="custom-red" class="intersection">交集选择器</div>
24     <div>交集选择器</div>
25     <div class="intersection">交集选择器</div>
26     <p>交集选择器</p>
27     <p>交集选择器</p>
28     <p class="intersection">交集选择器</p>
29     <a href="#" class="intersection">交集选择器</a>
30 </body>
31 
32 </html>

 

运行结果

 

4.并集选择器

  • 并集选择器（CSS选择器分组）是各个选择器通过","逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
  • 如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
  • 并集选择器: "和"的意思. 用逗号隔开的. 所有选择器都会执行后面样式。
    • 比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>并集选择器</title>
 7     <style>
 8         /* 并集选择器 : "和"的意思. 通常用于集体声明 */
 9         div,
10         p,
11         h2 {
12             color: red;
13         }
14     </style>
15 </head>
16 
17 <body>
18     <div>并集选择器div</div>
19     <p>并集选择器p</p>
20     <a>并集选择器a</a> <br>
21     <span>并集选择器span</span>
22     <h2>并集选择器h2</h2>
23 </body>
24 
25 </html>

运行结果

 

posted on 2019-01-22 18:39  jaydenjune  阅读(127)  评论(0)    收藏  举报

导航