CSS选择符-----关系选择符

包含选择符（E F）

选择所有被E元素包含的F元素

与子选择符(E>F) 不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #firstdiv p{
                color: #0000FF;
                font-weight: bold;
            }            
        </style>
    </head>
    <body>
        <div id="firstdiv">
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <ul>
                <li>Java</li>
                <li>C#</li>
            </ul>
            <div>
                <p>第三个段落。</p>
            </div>
        </div>
    </body>
</html>

子选择符（E>F）

选择所有作为E元素的子元素F

与包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #firstdiv>p{
                color: #0000FF;
                font-weight: bold;
            }            
        </style>
    </head>
    <body>
        <div id="firstdiv">
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <ul>
                <li>Java</li>
                <li>C#</li>
            </ul>
            <div>
                <p>第三个段落。</p>
            </div>
        </div>
    </body>
</html>

相邻选择符（E+F）

选择紧贴在E元素之后F元素，元素E与F必须同属一个父级

与兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul+div{
                color: #0000FF;
                font-weight: bold;
            }            
        </style>
    </head>
    <body>
        <div id="firstdiv">
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <ul>
                <li>Java</li>
                <li>C#</li>
            </ul>
            <div>
                <p>第三个段落。</p>
            </div>
            <div>
                <p>第四个段落。</p>
            </div>
        </div>
    </body>
</html>

兄弟选择符（E~F）

选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级

需要注意的是，选择的只是同级的元素F，后代中的元素F不会被选择

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul~div{
                color: #0000FF;
                font-weight: bold;
            }            
        </style>
    </head>
    <body>
        <div id="firstdiv">
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <ul>
                <li>Java</li>
                <li>C#</li>
            </ul>
            <div>
                <p>第三个段落。</p>
            </div>
            <div>
                <p>第四个段落。</p>
            </div>
        </div>
    </body>
</html>

posted @ 2018-12-10 16:25 风拂晚柳阅读(964) 评论(0) 收藏举报

刷新页面返回顶部