css选择器的优先级

最新推荐文章于 2024-10-09 14:44:12 发布

我再睡一会,

最新推荐文章于 2024-10-09 14:44:12 发布

阅读量291

点赞数 7

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/2401_85390397/article/details/142123485

版权

选择器的优先级

!important >行内样式（style）>id选择器（#）>类选择器（.类名）>元素选择器>通用选择器（*）>继承样式

<style>
	* {
		color: green;//通用选择器
	}
	#box-1 {
		color: red;!important;//id选择器
	}
	.box{
		color: pink;//类选择器
	}
	div{
		color: blue;//元素选择器
	}
</style>

<div id="box-1" class="box" style="color:aqua"//行内样式>
	hello world
</div>

这篇代码div最后的颜色就是红色，代码后加上!important 后浏览器会优先采用该样式但!important 与优先级无关，当某个样式属性值后面跟了!important，它将覆盖在任何地方声明的该属性。

继承样式

元素自动拥有其父元素或其祖先元素的某些样式，优先继承离得近的。

ps：一般颜色、文本属性等可以继承

行内样式

在标签内部通过通过style属性来设置元素的样式