<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1,h2{
            color: green;
        }
        div p{
            color: blue;
        }
        .c1>p{
            color: yellow;
        }
        h3+h4{
            color: red;
        }
    </style>
</head>
<body>

<!-- 组合选择器
    1、多元素选择器：匹配元素A或元素B，A和B之前用逗号分隔。
    2、后代元素选择器：匹配所有属于A元素后代的B元素，A和B用空格分隔。
    3、子元素选择器：匹配是所有A元素的子元素B，使用大于号。
    4、毗邻元素选择器：匹配所有紧邻A元素之后的同级元素B，使用加号。
-->

<!-- 多元素选择器
     1、在head中添加样式（演示方便，可以使用link）
     2、匹配A元素或B元素（h1,h2标签）
     3、不仅可以使用标签名，还可以使用id class等。
-->
<h1>组合选择器之多元素选择器</h1>
<h2>组合选择器之多元素选择器</h2>

<!-- 后代元素选择器
    1、在head中添加样式（演示方便，可以使用link）
    2、匹配A元素的后代元素B(div标签中的p标签)，其他不受影响。
    3、不仅可以使用标签名，还可以使用id class等。
    4、后代元素选择器可以递归匹配多层（不止匹配第二层的p标签，还会继续往后面匹配）。
-->
<div>
    <p>组合选择器之后代选择器</p>
    <span>组合选择器之后代选择器</span>
    <div>
        <p>组合选择器之后代选择器</p>
    </div>
</div>

<!-- 子代元素选择器
    1、在head中添加样式（演示方便，可以使用link）
    2、匹配是所有A元素的子元素B，其他不受影响。
    3、不仅可以使用标签名，还可以使用id class等。
    4、子代元素选择器不可以递归匹配多层，只匹配第二层。
-->
<div class="c1">
    <p>组合选择器之子代选择器</p>
    <span>组合选择器之子代选择器</span>
</div>

<!-- 毗邻元素选择器
    1、在head中添加样式（演示方便，可以使用link）
    2、匹配所有紧邻A元素之后的同级元素B。
    3、不仅可以使用标签名，还可以使用id class等。
-->
<h3>组合选择器之毗邻元素选择器</h3>
<h4>组合选择器之毗邻元素选择器</h4>

</body>
</html>

前端入门

一、前端基础-css-css的选择器之组合选择器.

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐