CSS 选择器优先级(权重)

一、问题提出?

请问div的背景颜色为红色还是绿色呢?


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	style>
head>
<body>
	<div style="background-color: green;">div>
body>
html>

答案为绿色。为什么会是绿色呢?难道存在代码执行的先后的覆盖问题?请看第二个问题。
CSS 选择器优先级(权重)_第1张图片


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
		div{
			width: 100px;
			height: 100px;
		}
		#demo1{
			background-color: red;
		}
		.demo2{
			background-color: green;
		}
	style>
head>
<body>
	<div class="demo2" id="demo1">div>
body>
html>

div的颜色为红色。当设置背景颜色的代码互换后div的背景颜色依然是红色。这说明并不是覆盖问题,读者可以自己试一试。

.demo2{
		background-color: green;
}
#demo1{
		background-color: red;
}

二、问题的解释

在css的样式中存在权重,权重最高的执行相关的代码。
权值是256进制。

相关属性 权值 相关样例
!important Infinity #only{background-color: yellow!important;}
行间样式 1000 p style = “” /p
id 100 #demo{}
class、属性、伪类 10 .demo{} 、 、a:hover{}
标签、伪元素 1 div{} 、::after{}
通配符 0 *{}

第一个问题中,由于行间样式的权值要比内联样式的权值要高,所以执行行间样式的代码。第二个问题中,由于id的权值要比class权值高,所以执行id的代码。

你可能感兴趣的:(Web前端开发)