组合选择器
''' E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 div,p { color:#f00; } E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 li a { font-weight:bold; }
E > F 子元素选择器，匹配所有E元素的子元素F div > p { color:#f00; } E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F div + p { color:#f00; } '''
注意嵌套规则：
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="css组合选择器"> <meta name="description" content="学而不思则罔，思而不学则殆"> <meta http-equiv="Refresh" content="120;https://www.baidu.com"> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <title>Title</title> <link rel="stylesheet" href="day104.css"> <link rel="icon" href="https://www.baidu.com/favicon.ico"> <!--<script src="js.js"></script>--> </head> <body> <p id="p1">p0</p> <div class="div0">div0</div> <div class="div1"> <div> <a href="">a</a> <p>p1</p> <div>div</div> <div class="div3"> div3</div> </div> <p>p2</p> <div class="div2">div2</div> <p class="p3">p3</p> </div> <div> after1</div> <div> after2</div> </body> </html>
#p1,div.div{ color: springgreen; } /*多元素选择器，同时匹配这两个元素，中间以逗号隔开*/ div.div1 div{ color: red; } div.div1 div.div2{ color: gold; } div.div1 div div{ color: seagreen; } div.div1 div.div3{ color: deepskyblue; } /*后代选择器，匹配所有属于该元素的后代元素(隔代也可以)，以空格分割*/ div.div1>div>p{ color: yellow; background-color: red; } /*子元素选择器，匹配该元素的子元素，不能隔代，大于号(>)表示*/ div.div1 + div + div{ background-color: yellow; } /*毗邻元素选择器(毗邻代表紧挨着的意思)，匹配紧随该元素之后(只能是往后不能往前)的同级元素*/