CSS样式优先级

最新推荐文章于 2024-03-21 11:25:43 发布

daysRoc

最新推荐文章于 2024-03-21 11:25:43 发布

阅读量446

点赞数

本文链接：https://blog.csdn.net/Donspeng/article/details/85716373

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

给DOM元素设置样式，通常通过以下几种方式：

通过ID选择器
通过类选择器
通过属性选择器
除了上面的几个之外，还有特殊的选择方式，比如
伪类
伪元素
通常来说，设定样式一般不会有什么问题，但是如果设置了几种样式，比如

// html
<div id = 'test'>
	<p>test</p>
</div>
// css
#test  p {
	color: orange
}
div  p {
	color: purple
}

各位觉得最终的样式是什么样子的？
最终会显示紫色。
其中的规则是这样的
1）类型选择器（type selectors）（例如, h1）和伪元素（pseudo-elements）（例如, ::before）权重1
2）类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如, [type=“radio”]），伪类（pseudo-classes）（例如, :hover）
权重10
3）ID选择器（例如, #example）权重100
4) 内联样式 权重1000
优先级依次递增，权重的计算与出现的先后顺序无关，同等权重的后出现的覆盖先出现的
通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ’ ') 和否定伪类（negation pseudo-class）(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。
除了上述声明的还有一些特别的规则：
1）样式树的距离

// html
<html>
<body>
  <h1>Here is a title!</h1>
</body>
</html>
// css
body h1 {
  color: green;
}
html h1 {
  color: purple;
}

第一个要优先于第二个
2）直接添加的样式 > 继承的样式

// html
<html>
<body id="parent">
  <h1>Here is a title!</h1>
</body>
</html>
// css
#parent {
  color: green;
}
h1 {
  color: purple;
}

显示紫色
如果想实现样式覆盖，应该怎么做？
1）实现相同的样式树，放在后面
2）！important
3）使用更高的优先级
总结起来，如下图所示，在这里插入图片描述参考资料：
MDN
CSS
CSS-ch

daysRoc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS样式优先级

给DOM元素设置样式，通常通过以下几种方式：通过ID选择器通过类选择器通过属性选择器除了上面的几个之外，还有特殊的选择方式，比如伪类伪元素通常来说，设定样式一般不会有什么问题，但是如果设置了几种样式，比如// html&lt;div id = 'test'&gt; &lt;p&gt;test&lt;/p&gt;&lt;/div&gt;// css#test p {...
复制链接

扫一扫