css复合选择器 - sdk社区

css复合选择器分类

css复合选择器分为：后代选择器、子选择器、复合选择器、伪类选择器、:focus选择器

后代选择器：元素下面包含的任意元素{…}

子选择器：元素下面包含的第一层元素{…}

复合选择器：元素, 元素{…}

伪类选择器：主要用于链接，a:链接状态{…}

:focus选择器：跟表单有关，选择获得光标的表单，input:focus{…}

注意：a:link a:visited a:hover a:active 一定不能换顺序，否则样式不生效，可以4个不写全，实际中常用a {} a:hover{}定义链接样式。以及鼠标经过链接时的样式，即可

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css复合选择器</title>
    <style>
        /* 后代选择器 */
        
        .fruit p {
            color: pink;
        }
        
        .fruit li {
            color: purple;
        }
        /* 子选择器 */
        
        .fruit .youlike {
            color: powderblue;
        }
        /* 并集选择器 */
        
        .season,
        .spring {
            color: seagreen;
        }
        /* 链接伪类选择器 */
        
        a:link {
            color: seagreen;
        }
        
        a:visited {
            color: sienna;
        }
        
        a:hover {
            color: skyblue;
        }
        
        a:active {
            color: brown;
        }
    </style>
</head>

<body>
    <div class="carton">
        <a href="#">海绵宝宝</a>
        <ol>
            <li><a href="#">小猪佩奇</a></li>
            <li>熊大</li>
            <li>熊二</li>
        </ol>
    </div>
    <div class="fruit">
        <p class="youlike">你喜欢的水果是？</p>
        <ul>
            <p class="ilike">我喜欢的水果是：</p>
            <li>苹果</li>
            <li>橙子</li>
            <li>芒果</li>
            <p>你呢？</p>
        </ul>
    </div>
    <div>
        <p class="season">你喜欢的季节是？</p>
        <ul>
            <p>我喜欢的季节是：</p>
            <li class="spring">春</li>
            <li class="summer">夏</li>
            <li>秋</li>
            <li>冬</li>
            <p>你呢？</p>
        </ul>
    </div>
</body>

</html>