CSS权重
!important (Infinity) >行内样式(1000)>id(100)>class&属性&伪类(10)>标签&伪元素(1)>通配符(0)
(这里的数值不是10进制,而是256进制的)
判断优先级通过权重值判断,权重值越大优先级高,权重一样时,后面覆盖前面样式。注:(infinity+1>infinity)
例:
<html>
<head>
</head>
<body>
<div class="classDiv" id="idDiv">
<p class="classP" id="idP">1</p>
</div>
</body>
</html>
#idDiv p{
background-color:red;//权重值依次是:1000,1
}
div .classP#idP{
background-color:green;//权重依次是:1,10,1000,所以显示的颜色为绿色
}
选择器:
基础选择器:
- id选择器
- class选择器
- 标签选择器
- 通配符选择器
复杂选择器: - 属性选择器[class=“demo”]{…}
- 父子(派生)选择器
(例:section div ul li a em {…} 浏览器内部寻找父子选择器的时候自右向左寻找,先寻 找em,这样的遍历更快) - 直接子元素选择器
例: div > em{ …} 表示:紧挨着div下的子元素 - 并列选择器
例:div.demo(class为demo的div) / div[class = “demo”] / #only.demo / demo#only
.food.rice(表示同时含有food和rice属性值的元素) - 分组选择器
例:em, strong, p{…} - 伪类选择器