css交集选择器、并集选择器、兄弟选择器

最新推荐文章于 2024-05-07 16:21:31 发布

打工人打工混

最新推荐文章于 2024-05-07 16:21:31 发布

阅读量457

点赞数

文章标签： css css3 html5

本文链接：https://blog.csdn.net/qq_45633169/article/details/109638535

版权

一，交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-css交集选择器.html</title>
    <!--
        交集选择器,相交的部分就是要设置属性值的标签
        1,格式:
        选择器1选择器2...{
            属性:值;
        }
        2,注意点:
        (1),选择器之间没有任何的连接符号
        (2),选择器可以是标签名称,也可以是id、class名称
        (3),交集选择器仅仅是了解
    -->
    <style>
        p.para1{
            color: red;
        }
    </style>
</head>
<body>

<p>我是段落</p>
<p>我是段落</p>
<p class="para1">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>
</body>
</html>

二，并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-css并集选择器.html</title>
    <!--
        并集选择器
        1,格式:
        选择器1,选择器2,...{
                属性:值;
           }
        2,注意点:
        (1),选择器之间利用,连接
        (2),选择器可以是标签名称,也可以是id、class名称
    -->
    <style>
        .ht,.para{
            color: red;
        }
    </style>
</head>
<body>

<h1 class="ht">我是头</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

三，兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-css兄弟选择器.html</title>
    <!--
        兄弟选择器,只选中同级的标签
        1,相邻兄弟兄弟选择(css2)
        格式:
        选择器1+选择器2{
            属性:值;
        }
        注意点:
        (1),相邻选择器必须用+链接
        (2),相邻选择器只能选中紧跟后边的那个标签,不能选中被隔开的标签

        2,通用兄弟选择器(css3),指定选择器后边特定的所有选择器都被选中
        格式:
        选择器1~选择器2{
            属性:值;
        }
    -->
    <style>
        /*h1+p{*/
            /*color: red;*/
        /*}*/
        h1~p{
            color: red;
        }
    </style>
</head>
<body>
<!--<h1>我是标题</h1>-->
<!--<a href="#">我是超级链接</a>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<h1>我是标题</h1>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->

<h1>我是标题</h1>
<a href="#">我是超级链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

打工人打工混

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css交集选择器、并集选择器、兄弟选择器

一，交集选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>15-css交集选择器.html</title> <!-- 交集选择器,相交的部分就是要设置属性值的标签 1,格式: 选择器1选择器2...{ 属性:值; }
复制链接

扫一扫