5、CSS组合选择器

CSS组合选择器

组合选择器：把基本选择器通过特殊符号串在一起，串起来之后能带来一些特定的意义。

组合选择器中主要需要掌握的有4个：

(1) 分组选择器

格式：选择器1,选择器2,选择器3 {声明}

意义：使用 “,” 将多个基本选择器连在一起，表示 这些选择器 所对应的元素 都使用这个声明中的样式。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="css-combine-selector.css">
</head>
<body>
    <div>div1</div>
    <p>p1</p>
</body>
</html>

    css

    div,p {
    background: green;
    color: red;
}
p {
    font-size: 60px;
}

    效果：

    这里div标签和p标签都有绿色的背景颜色及红色的字体颜色，另外p标签还单独有60px的字体大小。





(2) 嵌套选择器

格式：选择器1 选择器2 {声明}

意义：使用 空格 将多个基本选择器连在一起，表示 嵌套在 选择器1 中的 选择器2 所对应的元素 使用这个声明中的样式。

​          (无论选择器2被嵌套在第几级，只要它往上能找到是被选择器1嵌套着，那就都可以使用样式)

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="css-combine-selector.css">
</head>
<body>
    <div>
        div1
        <p>p2</p>
        <ul>
            <li>
                <p>p3</p>
            </li>
        </ul>
    </div>
    <p>p1</p>
</body>
</html>

    css

    div p {
    background: green;
    color: red;
    font-size: 60px;
}

    效果：

    这里内容”p2“和”p3“都嵌套在< div >中，因此都使用了样式，而其他的内容没有被< div >嵌套，并没有使用样式。





(3) 子选择器

格式：选择器1>选择器2

意义：使用 “>” 将多个基本选择器连在一起，表示 父标签 必须是 选择器1 的 选择器2 所对应的元素 使用这个声明中的样式。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="css-combine-selector.css">
</head>
<body>
    <div>
        div1
        <p>p2</p>
        <ul>
            <li>
                <p>p3</p>
            </li>
        </ul>
    </div>
    <p>p1</p>
</body>
</html>

    css

    div>p {
    background: green;
    color: red;
    font-size: 60px;
}

    效果：

    这里“p2”内容的父标签是< div >，因此使用了样式。

    而内容“div1”、“p1”的父标签是< body >，内容“p3”的父标签是< li >，所以没有使用样式。





(4) 相邻同级选择器

格式：选择器1+选择器2 {声明}

意义：使用 “+” 将多个基本选择器连在一起，表示 与 选择器1所对应元素 位于同一级的 选择器2所对应的元素 使用这个声明中的样式。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="css-combine-selector.css">
</head>
<body>
    <div>
        div1
        <p>p2</p>
        <ul>
            <li>
                <p>p3</p>
            </li>
        </ul>
    </div>
    <p>p1</p>
</body>
</html>

    css

    div+p {
    background: green;
    color: red;
    font-size: 60px;
}

    效果：

    这里只有内容“p1”与< div >标签位于同一级，因此只有它使用了样式。

posted @ 2021-03-06 12:21  丨Mr丨C  阅读(121)  评论(0)    收藏  举报