Html-高级选择器及优先级

最新推荐文章于 2023-05-12 23:22:31 发布

weixin_30387339

最新推荐文章于 2023-05-12 23:22:31 发布

阅读量130

点赞数

原文链接：http://www.cnblogs.com/863652104kai/p/11273346.html

版权

CSS高级选择器

CSS高级选择器

1.后代选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        /*用空格连接，body下的h1标签都用这个样式*/
        body .h1{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="h1">div下的一级标题</h1>  <!--color：red-->
    </div>

    <h1 class="h1">body下的一级标题</h1>  <!--color：red-->

</body>
</html>

2.子代选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        /*用 > 连接，紧接着body下的h1标签用这个样式，*/
        body > .h1{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="h1">div下的一级标题</h1>
    </div>

    <h1 class="h1">body下的一级标题</h1>  <!--color：red-->

</body>
</html>

3.兄弟标签

同一结构下的标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>兄弟标签</title>
    <style>
        /*用~连接，表示与h1在同一结构下的h2*/
        .h1 ~ .h2{
            color:pink;
        }

    </style>
</head>
<body>
    <div>
        <h1 class="h1">div下的第1个一级标题</h1>
        <h2 class="h2">div下的第2个一级标题</h2>  <!--color:pink-->
        <h2 class="h2">div下的第3个一级标题</h2>  <!--color:pink-->
    </div>
</body>
</html>

4.相邻标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相邻标签</title>
    <style>
        /*用+连接，表示给与h1下相邻的h2设置样式*/
        .h1 + .h2{
            color:pink;
        }

    </style>
</head>
<body>
    <div>
        <h1 class="h1">div下的第1个一级标题</h1>
        <h2 class="h2">div下的第2个一级标题</h2>  <!--color:pink-->
        <h2 class="h2">div下的第3个一级标题</h2>
    </div>
</body>
</html>

5.群组选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>群组选择器</title>
    <style>
        /*给多个选择器设置相同的样式时使用*/
        .h1,.h3,.h2{
            color:orange;
            text-align:center;
        }

    </style>
</head>
<body>
    <div>
        <h1 class="h1">div下的第1个一级标题</h1>
        <h2 class="h2">div下的第2个一级标题</h2>
    </div>
    <h3 class="h3">h3下的标题</h3>
    <p>段落标签</p>

</body>
</html>

6.交叉选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>交叉选择器</title>
    <style>
        h2#h2h2.h2.hh{
            color:red;
        }

    </style>
</head>
<body>
    <div>
        <h1 class="h1">div下的第1个一级标题</h1>
        <h2 id="h2h2" class="h2 hh">div下的第2个一级标题</h2>
    </div>
    <h3 class="h3">h3下的标题</h3>
    <p>段落标签</p>

</body>
</html>

选择器优先级

选择器级别：!important > id > class >标签 > 统配

不同级别之间没有可比性
同一级别比个数
选择器类型不影响优先级
优先级一致时看顺序

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        #haha{
            color:brown;
            text-align: center;
        }
        .h2{
            color:green;
            text-align: center;
        }

        div .h2{
            color:red;
            text-align: center;
        }

        .h1 + .h2 {
            color: grey;
            text-align: center;
        }

        h2{
            color:orange;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class="h1">body下的第1个一级标题</h1>
    <div>
        <h1 class="h1">div下的第1个一级标题</h1>
        <h2 id="haha" class="h2">div下的第1个一级标题</h2>
    </div>

</body>
</html>

转载于:https://www.cnblogs.com/863652104kai/p/11273346.html