1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 /*
8 为span后的一个p元素设置一个背景颜色
9 1.后一个兄弟元素选择器
10 作用：
11 可以选中一个元素后紧挨着的指定的兄弟元素
12 语法：
13 前一个+后一个
14 2.选中后边的所有兄弟元素
15 语法：
16 前一个~后一个
17 */
18 span+p{
19 background-color:yellow;
20 }
21 span~p{
22 background-color:green;
23 }
24 </style>
25 </head>
26 <body>
27 <p>123</p>
28 <p>123</p>
29 <span>123</span>
30 <p>123</p>
31 <p>123</p>
32 </body>
33 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 /*
8
9 否定伪类：
10 作用：
11 可以从已选中的元素中剔除某些元素
12 语法：
13 :not(选择器)
14
15 为所有的p元素设置一个背景颜色为黄色，除了class值为hello
16 */
17 p:not(.hello){
18 background-color:yellow ;
19 }
20 </style>
21 </head>
22 <body>
23 <p>123</p>
24 <p>123</p>
25 <span>123</span>
26 <p class="hello">123</p>
27 <p>123</p>
28 </body>
29 </html>
