CSS 复合选择器

CSS 复合选择器是由两个或多个基础选择器通过不同方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器是由两个选择器构成，其中第一个为 标签选择器，第二个为 类（class）选择器，两个选择器之间不能有空格。如 h3.special，表示选择的是类名为 .special 的 h3 标签。

书写格式如下：

相对使用较少，不推荐使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-显示模式</title>
    <style>
        .c-red {
            color: red;
        }

        p.c-red {
            /*交集选择器，p 标签在引用时，直接使用 class="c-red" 即可*/
            font-size: 22px;
            font-weight: bold;
        }
    </style>
</head>
<body bgcolor="#C5ECFF">
<div class="c-red">熊大</div>
<p class="c-red">熊二</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

显示效果：

并集选择器

并集选择器（CSS 选择器分组）是各个选择器通过 逗号 , 链接而成的，任何形式的选择器（包括标签选择器、class 类选择器、id 选择器等）都可以作为并集选择器的一部分。

如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式。也就是说，并集选择器通常用于集体声明。

并集选择器的语法格式如下:

如：.one , p , #test { color : #F00; } 表示 .one 、p 、#test 这三个选择器都会执行将颜色变为红色的操作。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>3-显示模式</title>
   <style>
       /*多个并集选择器通常竖着写*/
       #bear-small,
       span,
       div,
       .king {
           color: red;
           font-size: 18px;
           font-weight: normal;
       }

   </style>
</head>
<body bgcolor="#C5ECFF">
<div>熊大</div>
<p id="bear-small">熊二</p>
<span>光头强</span>
<h1>还有谁？</h1>
<h1 class="king">吉吉大王</h1>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

显示效果：

后代选择器

后代选择器又称为包含选择器, 用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

其书写格式如下:

也可以按照这种格式写： div p { color: red ; font-size: 18px; } , 表示将 div 内部的 p 设置成红色，并修改字号为 18px。

注意**：这里的后代包括儿子、孙子、重孙子等。**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-显示模式</title>
    <style>
        /*后代选择器写法1*/
        div p {
            color: red;
            font-size: 18px;
            font-weight: normal;
        }

        /*后代选择器写法2*/
        .big-bear p {
            color: green;
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>
<body bgcolor="#C5ECFF">

<div>
    <p>熊大</p>
</div>
<div class="big-bear">
    <div>
    <p>熊二</p>
    </div>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

子元素选择器

子元素选择器 只能选择某个元素的子元素。其写法是 把父级标签写前面，子级标签写后面，中间跟一个 > 连接。注意，符号左右需要各保留一个空格。

注意：这里说的 子 仅指儿子，不包含孙子或重孙子。

如：.demo > h3 {color : red} ，表示 h3 是 .demo 的一级子标签，将其修改为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-显示模式</title>
    <style>
        .nav li{
            color: green;
        }

        .nav > li {
            color: red;
        }
    </style>
</head>
<body bgcolor="#C5ECFF">

<ul class="nav">
    <li> 一级列表使用子元素选择器
        <ul>
            <li>二级列表</li>
            <li>二级列表</li>
            <li>二级列表</li>
        </ul>
    </li>
</ul>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

显示效果如下:

测试题

要求：在不修改代码的前提下，

1、设置登录为红色，同时主导航栏中的所有连接改为蓝色
2、主导航栏和测导航栏中的文字都设置成微软雅黑 14px
3、主导航栏中的一级菜单连接文字的颜色为绿色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-显示模式</title>
    <style>

    </style>
</head>
<body bgcolor="#C5ECFF">

<div class="nav">
    <ul>
        <li><a href="#">公司首页</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司产品</a></li>
        <li>
            <a href="#">联系我们</a>
            <ul>
                <li><a href="#">公司邮箱</a></li>
                <li><a href="#">公司电话</a></li>
            </ul>
        </li>
    </ul>
</div>

<div class="site-nav">
    <div class="site-l">左侧导航朗</div>
    <div class="site-r"><a href="#">登录</a></div>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

显示效果如下:

样式代码如下:

<style>
        .site-r > a {
            /*子元素选择器*/
            color: red;
        }

        .nav a {
            /*后代选择器*/
            color: orange;
        }

        .nav,
        .site-nav {
            /*并集选择器*/
            /*font-family: "Microsoft YaHei";*/
            /*font-size: 14px;*/
            /*下面这一行是上面两行的简写模式*/
            font: 14px "Microsoft YaHei";
        }

        .nav > ul > li > a {
            /*子元素选择器*/
            color: green;
        }
    </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

属性选择器

选取带有某些指定属性的标签，基本格式为 标签名[属性名]{ }

选择器	含义
`E[attr]`	选取使用了 attr 属性的 E 标签
`E [attr=val]`	选取 attr 属性的值为 val 的 E 标签
`E [attr*=val]`	属性值中包含 val 字符并且在任意位置的 E 标签
`E [attr^=val]`	属性值中包含 val 字符并且在开始位置的 E 标签
`E [attr$=val]`	属性值中包含 val 字符并且在结束位置的 E 标签

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-属性选择器</title>
    <style>
        a[title] {
            color: red;
        }

        input[type=text]{
            color: red;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">
<a href="#" title="这是谷歌">谷歌</a>
<a href="#">百度</a>

<input type="text" value="请输入">
<input type="submit">
<input type="reset">
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

显示效果：

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-属性选择器2</title>
    <style>
        div[class^=font] {
            /* 属性值以 font 开头的 */
            color: red;
        }

        div[class$=font] {
            /* 属性值以 font 结尾的 */
            color: green;
        }

        div[ class*="text"] {
            /*属性值的任意位置包含 text 文本的*/
            color: #ff620e;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<div class="font1">属性选择器示例2-class=font1</div>
<div class="font2">属性选择器示例2 class=font2</div>
<div class="1font">属性选择器示例2 class=1font</div>
<div class="2font">属性选择器示例2 class=2font</div>
<div class="text-style">属性选择器示例2 class=text-style</div>
<div class="style-text">属性选择器示例2 class=style-text</div>
<div class="style-text-s">属性选择器示例2 class=style-text-s</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

显示效果:

伪元素选择器

格式	含义
`E::first-letter{ }`	选择文本的第一个单词或字（英文中是单词，中日韩文中是字）
`E::first-line{ }`	选择文本第一行
`E::selection`	可改变选中文本的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-属性选择器2</title>
    <style>
        p:first-letter {
            /* 选择第一个单词或字*/
            color: red;
            font-size: 18px;
        }

        p:first-line {
            /*选择第一行*/
            color: green;
            font-size: 14px;
        }

        p::selection {
            /*更改被选中文本的样式*/
            color: #ff620e;
            font-size: 16px;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">
<P>
    随便写一点文本内容，测试伪元素选择器。This is first letter.
</P>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

显示效果:

E:after 和 E:before 在旧版本中是伪元素，CSS3 的规范中 : 用来表示伪类，:: 用来表示伪元素，但在高版本浏览器下 E:after 和 E:before 会被自动识别为 E::after 和 E::before, 这样做的目的是为了做兼容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-属性选择器2</title>
    <style>
       div:before{
           content: "在div内容的前面插入，";
       }
        div:after{
            content: "  在div的后面补上。";
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<div>今年。</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

显示效果如下:

类选择器、伪类选择器、伪元素选择器格式对比

格式	含义
`.xxx`	表示类选择器
`:xxx`	表示伪类选择器
`::xxx`	表示伪元素选择器

#CSS

上次更新: 2025/02/26, 08:57:57

← 引入 CSS 样式表 CSS 背景（background）→