伪元素与选择器权重

最新推荐文章于 2023-04-20 17:57:52 发布

hello_xujj

最新推荐文章于 2023-04-20 17:57:52 发布

阅读量320

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/xjj19999272/article/details/116242451

版权

CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

伪元素

CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素，用双冒号表示。

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容。

::after 创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性表示其中的内容。

::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）。

::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母。

::first-line会选中某元素中（必须是块级元素）第一行全部文字。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a::before {
            content: "☆";
        }
        a::after {
            content: "❤";
        }
        .box1 {
            /* 设置高度、宽度 */
            height: 200px;
            width: 200px;
            /* 边框 */
            border: 1px solid #000;
        }
        .box1::selection {
            background-color: red;
        }
        .box1::first-letter {
            font-size: 30px;
        }
        .box1::first-line {
            background-color: blue;
        }
    </style>
</head>
<body>
    <a href="">我是超级链接</a>
    <div class="box1">
        伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素
</body>
</html>

代码效果如下：
\Snipaste_2021-04-24_15-01-05.png
)]

层叠性和选择器权重计算

层叠性

CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质。

层叠性：多个选择器可以同时作用于同一个标签，效果叠加。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
        }

        .spec {
            font-style: italic;
        }

        #para {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <p id="para" class="spec">我是段落</p>
</body>
</html>

代码效果如下：
$\Snipaste_2021-04-24_15-14-57.png$
)]

层叠性的冲突处理

如果多个选择器定义的属性有冲突，CSS有严密的处理冲突的规则。那便是id权重>class权重>标签权重，也就是说优先选择id选择器定义的属性，class选择器次之，标签选择器再次之。

复杂选择器权重计算

如果css中有复杂选择器，那么可以通过（id的个数, class的个数, 标签的个数）的形式，计算权重。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 权重(2, 0, 2) */
        #box1 #box2 p {
            color: red;
        }

        /* 权重(2, 1, 2) */
        #box1 div.box2 #box3 p {
            color: green;
        }
        
        /* 权重(0, 3, 1) */
        .box1 .box2 .box3 p {
            color: blue;
        }

        .spec {
            color: blue !important;
        }
    </style>
</head>
<body>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>我是段落</p>
            </div>
        </div>
    </div>
</body>
</html>

字体颜色为红色的选择器的权重是(2, 0, 2)，为绿色的选择器的权重是（2，1，2），为蓝色的选择器的权重是（0，3，1），三个数字分别代表id的个数, class的个数, 标签的个数，因此先比较id的个数；如果id的个数相同，在比较class的个数；class的个数相同，在比较标签的个数。所以该代码中最后字体的颜色应是绿色。

代码效果如下：

)]

!important提升权重

如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important。但一般不建议使用!important，因为这会带来不经意的样式冲突。

hello_xujj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪元素与选择器权重

伪元素CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素，用双冒号表示。::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容。::after 创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性表示其中的内容。::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）。::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母。::firs
复制链接

扫一扫