CSS：选择器-复合选择器

原创已于 2025-05-14 10:03:24 修改 · 526 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-04-30 21:15:08 首次发布

前端专栏收录该内容

133 篇文章

订阅专栏

文章目录

1、HTML元素间的关系

①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。
在这里插入图片描述

2、交集选择器

    <style>
        /* 选中类名为rich的元素*/
        .rich {
            color: gold;
        }
        /* 选中类名为beauty的元素*/
        .beauty {
            color: red;
        }
        /* 选中类名为beauty的p元素，这种形式（元素配合类选择器）以后用的很多！！ */
        p.beauty {
            color: green;
        }
        /* 选中同时具备rich和beauty类名的元素 */
        .rich.beauty {
            color: orange;
        }
    </style>
</head>
<body>
    <h2 class="rich">土豪张三</h2>
    <h2 class="beauty">明星李四</h2>
    <h2 class="rich beauty">土豪明星王五</h2>
    <hr>
    <p class="beauty">小狗旺财</p>
    <p class="beauty">小猪佩奇</p>
</body>

3、并集选择器（分组选择器）

        /* 选中类名为：rich或beauty或dog或pig或id为suxi的元素*/
        .rich,
        .beauty,
        .dog,
        .pig,
        #suxi {
            font-size: 40px;
            background-color: gray;
            width: 180px;
        }

4、后代选择器

在这里插入图片描述

5、子代选择器

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>04_子代选择器</title>
    <style>
        div>a {
            color: red;
        }
        div>p>a{
            color: skyblue;
        }
        .foot>a {
            color: chocolate;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">张三</a>
        <a href="#">李四</a>
        <a href="#">王五</a>
        <p>
            <a href="#">赵六</a>
            <div class="foot">
                <a href="#">孙七</a>
            </div>
        </p>
    </div>
</body>

6、兄弟选择器

1、相邻兄弟元素
在这里插入图片描述
2、所有兄弟元素

7、属性选择器

一般不用属性选择器选择 class和id 属性元素。
在这里插入图片描述

8、伪类选择器(较难)

在这里插入图片描述
在原有选择器的基础上，进一步添加选择器的状态。

8.1、动态伪类

其中，:link，:visited只用于a标签
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08_伪类选择器_动态伪类</title>
    <style>
        /* 选中的是没有访问过的a元素 */
        a:link {
            color: orange;
        }
        /* 选中的是访问过的a元素 */
        a:visited {
            color: gray;
        }
        /* 选中的是鼠标悬浮状态的a元素 */
        a:hover {
            color: skyblue;
        }
        /* 选中的是激活状态的a元素 */
        a:active {
            color: green;
        }
        /* 选中的是鼠标悬浮的span元素 */
        span:hover {
            color: green;
        }
        /* 选中的是激活的span元素 */
        span:active {
            color: red;
        }
        /* 选中的是获取焦点状态的input元素、获取焦点状态的select元素 */
        input:focus,select:focus {
            color: orange;
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
    <span>尚硅谷</span>
    <br>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <input type="text">
    <select>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>
</body>
</html>

8.2.、结构伪类

n=an+b
在这里插入图片描述

    <style>
        /* 选中的是div的第一个儿子且是p元素（按照所有兄弟计算的） —— 看结构1 */
        div>p:first-child {
            color: red;
        }

        /* 选中的是div的第一个儿子且是p元素（按照所有兄弟计算的） —— 看结构2 */
        div>p:first-child {
            color: red;
        }

        /* 选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 */
        div p:first-child {
            color: red;
        } 

        /* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 */
        p:first-child {
            color: red;
        }
        --------------------------------------------------------------------------------------------
        /* 选中的是div的第一个儿子p元素（按照所有兄弟计算的）—— 结构1*/
        div>p:first-child {
            color: red;
        }

        /* 选中的是div的最后一个儿子p元素（按照所有兄弟计算的）—— 结构1*/
        div>p:last-child {
            color: red;
        }
        
        /* 选中的是div的第n个儿子p元素（按照所有兄弟计算的）—— 结构1 */
        div>p:nth-child(3) {
            color: red;
        }
    
        /* 选中的是div的偶数个儿子p元素（按照所有兄弟计算的）—— 结构2 */
        /* 关于n的值 —— 结构2：
                1. 0或不写：什么都选不中 —— 几乎不用。
                2. n ：选中所有子元素  —— 几乎不用。
                3. 1 ~ 正无穷的整数，选中对应序号的子元素。
                4. 2n 或 even  ：选中序号为偶数的子元素。
                5. 2n+1 或 odd ：选中序号为奇数的子元素。
                6. -n+3 : 选中前三个。
         */
        div>p:nth-child(2n) {
            color: red;
        }
    
        /* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */
        div>p:first-of-type{
            color: red;
        }

        /* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */
        div>p:last-of-type{
            color: red;
        }
        
        /* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */
        div>p:nth-of-type(5) {
            color: red;
        }
        ---------------------------------------------------------------------------------------------
        /* 选中的是div的儿子p元素，但排除第一个儿子p元素 */
        div>p:not(:first-child) {
            color: red;
        }
    </style>

9、伪元素选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>16_伪元素选择器</title>
    <style>
        /* 什么是伪元素？ —— 很像元素，但不是元素（element），是元素中的一些特殊位置 */

        /* 选中的是div中的第一个文字 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div中的第一行文字 */
        div::first-line {
            background-color: yellow;
        }
        /* 选中的是div中被鼠标选择的文字 */
        div::selection {
            background-color: green;
            color: orange;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的是p元素最开始的位置，随后创建一个子元素 */
        p::before {
            content:"￥";
        }
        /* 选中的是p元素最后的位置，随后创建一个子元素 */
        p::after {
            content:".00"
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quibusdam amet eligendi velit dolore sequi, exercitationem consequatur, quis maiores tempore accusantium ipsum aspernatur iusto fugiat fuga natus est placeat. Accusamus maiores culpa et sunt dolorum incidunt. Ducimus in odio tempora minima provident deleniti, ex voluptatem facere, molestias unde exercitationem pariatur rem vero ut quidem quaerat aliquam, nam debitis perspiciatis. Facere?</div>
    <br>
    <input type="text" placeholder="请输入您的用户名">
    <p>199</p>
    <p>299</p>
    <p>399</p>
    <p>499</p>
</body>
</html>