css的组合选择器

组合选择器

'''
 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;
}
/*毗邻元素选择器(毗邻代表紧挨着的意思)，匹配紧随该元素之后(只能是往后不能往前)的同级元素*/

while True: print('studying...')