CSS选择器分类和权重

CSS 专栏收录该内容
28 篇文章 0 订阅

CSS全称“Cascading Style Sheet”,叫做层叠样式表。CSS样式就像透明的层一样一层一层叠加起来 来修饰一个元素。

分类和权重

分类

  • 元素选择器 a{}
  • 伪元素选择器 ::before{}
  • 类选择器 .link{}
  • 属性选择器 [type=radio]{}
  • 伪类选择器 :hover{}
  • ID选择器 #id{}
  • 组合选择器 [type=checkbox] + babel{}
  • 否定选择器,括号选择器取反 :not(.link){}
  • 通用选择器 *{}

伪元素不会出现在HTML中,也不会出现在DOM树中,但是在页面中是真实存在的元素,在页面中可以有内容,有样式;而伪类是元素的某种状态。

权重: 计算一个不进位的数字

  • ID选择器 #id{} +100
  • 类 属性 伪类 +10
  • 元素 伪元素 +1
  • 其它选择器 +0

比如:
在这里插入图片描述
上面右边选择器的优先级比左边高,样式叠加的时候右边选择器的样式会覆盖左边选择器的样式。

其它权重:

  • !important优先级最高。当一个css属性加上!important后,那这个属性的值就是最重要的,不管谁都没有办法覆盖它,不管前面用的什么选择器,不管出现在哪里,只要有!important那它的优先级就是最高的。
  • 内联样式 优先级更高。相比写在style标签和外部链接的样式,
  • 相同权重 ,后写的生效。

解析方式和性能

浏览器的解析方式是从右往左解析的,比如下面元素a的样式.body div .hello{ ... },浏览器先找到 .hello,然后接着验证.hello有没有祖先是div,然后再验证div的祖先有没有是.body的。这样找元素匹配的样式会更快,浏览器这样解析性能会更高。

html代码:

<body class="body" id="body">
    Hello CSS!
    <div>
        <a href="#" class="hello">aaa</a>
    </div>
</body>

css代码:

    <style>
        body{
            padding: 10px;
            font-size: 14px;
            background:red; 
        }
        body.body{
            font-size: 20px;
            background: red;
        }
        #body{
            background: blue;
        }
        .body div .hello{
            color: pink;
        }
    </style>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值