3.css选择器的优先级计算

最新推荐文章于 2022-12-03 01:30:44 发布

sheerhr

最新推荐文章于 2022-12-03 01:30:44 发布

阅读量79

点赞数

分类专栏：面试必备问题

本文链接：https://blog.csdn.net/qq_24871849/article/details/110529210

版权

面试必备问题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

内联 > ID选择器 > 类选择器 > 标签选择器
/* id选择器的权重时候0100 /
/ 类选择器的权重是0010 /
/ 标签选择器的权重是0001 /
/ 行内选择器的权重是1000 */
继承的权重是0

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
        }
        .demo {
        	color: blue;
        }
        p {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="demo">
        <p>张三的爸爸姓王</p>
    </div>
</body>
</html>

p标签选择器的样式会覆盖从父元素继承过来的样式,修改样式时，一定要看该标签有没有被选中，再来计算权重。

那接下来，小伙伴们，搞一道题瞧一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p {
            color: red;
        }
        #father {
            color: blue;
        }
        p.c2{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="c1" id="father">
        <p class="c2">张三的爸爸姓王</p>
    </div>
</body>
</html>

sheerhr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.css选择器的优先级计算

内联 > ID选择器 > 类选择器 > 标签选择器/* id选择器的权重时候0100 // 类选择器的权重是0010 // 标签选择器的权重是0001 // 行内选择器的权重是1000 */继承的权重是0案例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid
复制链接

扫一扫

专栏目录