1.包含选择器 (A B)
选择所有被A元素包含的B元素,中间用空格隔开
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul li{color:green;} </style> </head> <body> <ul> <li>aaa</li> <li>bbb</li> </ul> <ol> <li>ccc</li> </ol> </body> </html>
以上代码定义了ul中两个li,和ol中一个li,然后通过包含选择器改变ul中两个li的颜色,
效果如下:
2.子选择器 (A>B)
选择所有作为A元素的直接子元素B,对更深一层的元素不起作用,用>表示.。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div>a{color:red} </style> </head> <body> <div> <a href="">子元素1</a> <p> <a href="">孙元素</a> </p> <a href="">子元素2</a> </div> </body> </html>
以上代码定义了三个a标签,其中一个被p标签包含,然后通过子选择器改变div中两个子
元素的颜色,效果如下:
3.相邻选择器 (A+B)
选择紧跟A元素后的B元素,用加号表示,选择相邻的第一个兄弟元素。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> h1+p{color:red;} </style> </head> <body> <h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p> </body> </html>
以上代码定义了一个h1标签和两个p标签,然后通过邻近选择器改变与h1相邻元素的
颜色,效果如下:
4.兄弟选择器 (A~B)
选择A元素之后的所有兄弟元素B,作用于多个元素,用~隔开
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> h1~p{color:red;} </style> </head> <body> <h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p> </body> </html>
以上代码定义了一个h1标签和两个p标签,然后通过兄弟选择器改变h1之后的所有兄弟元素的
颜色,效果如下: