CSS选择器

汪喆_Jack

于 2019-07-30 23:30:44 发布

阅读量161

点赞数 2

分类专栏： CSS相关文章标签： CSS HTML 样式

本文链接：https://blog.csdn.net/qq_34829447/article/details/97833294

版权

CSS相关专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS(Cascading Style Sheet)层叠样式表

一.基本规则

1.CSS基本规则

选择器 {
    属性: 值;
    属性: 值
}

2.选择器

用于匹配HTML元素
有不同的匹配规则
多个选择器可叠加

3.选择器解析方式和性能

实例代码

<body class="body">
    Hello Jack!
    <div>
        <a class="jack">Jack</a>
    </div>
</body>
<style>
    .body div .jack {
        color: red;
    }
</style>

以上示例中，浏览器的解析CSS的方式是从右往左进行解析【出于性能考虑，目的：加快浏览器解析速度】
当浏览器看到样式设置时，先找class为jack的元素，之后验证祖先是否是div，再验证祖先class是否是body

二.选择器分类

1.选择器综合分类

元素选择器a{}
伪元素【真实存在的元素，页面上真实存在】选择器::before{}
类选择器.link{}
属性选择器[type=radio]{}
伪类【是元素的状态，不是页面中真实存在的元素】选择器:hover{}
ID选择器#id{}
组合选择器[type=checkbox]+label{}
否定选择器:not(.link){}
通用选择器*{}

2.选择器权重

ID选择器 #id{} +100
类属性伪类 +10
元素伪元素 +1
其他选择器 +0
权重高的在相同情况下会覆盖权重低的样式
权重计算数字是不进位的，即就算有11个类选择器，也不会超过ID选择器
影响选择器权重的其他情况
- !important优先级最高
- 元素属性优先级高（直接写在元素标签的属性style上）
- 相同权重后写的生效

汪喆_Jack

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录