第三讲_css选择器优先级

css选择器优先级

  • 1. 单个选择器优先级
  • 2. 组合选择器优先级
  • 3. !important
  • 4. css的特性
    • 4.1 层叠性
    • 4.2 继承性
    • 4.3 优先级

1. 单个选择器优先级

id 选择器 > 类选择器 > 元素选择器 > 通用选择器

<style>
	* {
		color: red;
	}
	#cid {
		color: green;
	}
	.cclass{
		color: blue;
	}
	div{
		color: pink;
	}
style>

<div id="cid" class="cclass">
	hello world
div>

ps:可以注释掉对应的选择器,执行观察结果,非常容易得出上面的优先级结论

2. 组合选择器优先级

组合选择器的优先级需要先计算它的权重,权重的计算结果(x, y, z),然后比较权重。

权重的计算方式:

  • x:id选择器的个数
  • y:类选择器、伪类选择器、属性选择器的个数
  • z:元素选择器、伪元素选择器的个数

权重的比较方式:

  1. 先比较xx大的优先级高。
  2. 如果x相同,再比较yy大的优先级高。
  3. 如果y也相同,再比较zz大的优先级高。
  4. 如果z也相同,比较选择器编写的先后顺序,后面的优先级高。
<style>
/* 下面的 3 个选择器都匹配了相同元素 */

/* 选择器的权重为(0, 0, 2) */
div div {
	color: red;
}

/* 选择器的权重为(0, 1, 1) */
.container div {
	color: green;
}

/* 选择器的权重为(1, 1, 0) */
.container #first-div {
	color: blue;
}
style>
<div class="container">
	<div id="first-div">hello worlddiv>
div>

ps:获取选择器的权重简单方式:vscode中把鼠标放在选择器上,即可得到选择器的权重

3. !important

!important 与优先级无关,当某个样式属性值后面跟了!important,它将覆盖在任何地方声明的该属性。

<style>
/* 选择器的权重为(0, 0, 2) */
div div {
	color: red !important;
}

/* 选择器的权重为(1, 1, 0) */
.container #first-div {
	color: blue;
}
style>
<div class="container">
	<div id="first-div">hello worlddiv>
div>

4. css的特性

4.1 层叠性

如果发生了样式冲突,那就会根据一定规则(选择器优先级),进行样式的层叠。

4.2 继承性

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

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

4.3 优先级

!important > 行内样式 > id 选择器 > 类选择器 > 元素选择器 > 通用选择器 > 继承的样式

你可能感兴趣的:(CSS样式,css,前端,css3)