CSS选择器以及权重顺序
【摘要】 CSS选择器以及权重的设置
一个页面的搭建离不开css样式，而想要使用css对页面元素进行控制就需要用到css选择器。
按照引入方式可以说有内部样式（样式写到标签中的style里）、外部样式（样式通过引入外部的css文件）、内联样式（样式写在html文件中的style标签里）
按照选择器分类的话，常见的选择器有id选择器、类选择器、标签选择器、通配符选择器、派生选择器
```
<!DOCT
一个页面的搭建离不开css样式，而想要使用css对页面元素进行控制就需要用到css选择器。
按照引入方式可以说有内部样式（样式写到标签中的style里）、外部样式（样式通过引入外部的css文件）、内联样式（样式写在html文件中的style标签里）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content" class="container">
content1
<div id="content2" class="container">
content2
</div>
</div>
</body>
<style>
/* div {
color: red;
} */
#content {
color: aquamarine;
}
.container {
color: blue;
}
/* * {
color: yellow
} */
div .container {
color: rgb(224, 34, 215)
}
#content2 {
color: burlywood
}
</style>
</html>不同的选择器，权重是不一样我们可以看到就上面的选择器而言
id>级联>class>标签>通配符
细致一点的话，再找几个例子的话，可以发现上面的并不完全正确
尤其是涉及到id跟级联这块
div #content2 {
color: rgb(9, 90, 45)
}
#content2 {
color: burlywood
}可以发现，上面这种是第一个颜色显示出来，而不是根据id显示出来。
原因css通配符选择器效率低，因为css匹配的顺序不是从左向右，而是从右向左。使用通配符选择器时，浏览器会先匹配所有的元素，再进一步匹配其他规则，这样就导致了效率变低。
css的匹配规则是从右往左，也就是说，就上面的例子而言先匹配content2的元素，再匹配属于div的content元素。这样的话，即使存在下面的样式，也会被上面的覆盖掉。
至于通配符的话，他其实存在一些效率问题。毕竟匹配所有元素不如指定元素。
此外，针对class属性中有两个选择器的情况，优先级是按照定义顺序方式确定的。
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content" class="container">
content1
<div id="content2" class="container container2">
content2
</div>
</div>
</body>
<style>
.container2 {
color: aqua
}
.container {
color: red
}
</style>
</html>也就是说交换上面.container和.container2的位置，字的颜色会发生变化，但是修改class=“container container2”为class=“container2 container“并不会改变字的颜色。
此外对于! important可以提高优先级值得提一下，一般不提倡使用，毕竟正常用上面的选择器有语义化，都能看懂，突然来了个插队的，怎么玩？
示例：class比id选择器更优先，因为加了个!important
\#content {
color: blueviolet
}
.container {
color: aqua !important
}
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）