选择器
选择器 | 标识 |
---|---|
通配符选择器 | * (能匹配页面中所有的元素) |
元素选择器 | div |
类选择器 | .class |
id选择器 (CSS3) | #id |
伪类选择器 | |
复合选择器 | (1)交集(嵌套)选择器 - 点 . (2)并集(分组)选择器 - 逗号 , (3)后代选择器 - 空格 (4)子元素选择器 - 大于号 > 说明: (1)交集选择器:p.one {} 匹配所有类名为one的p元素。 (2) 并集选择器:.one,p,#test {} 用逗号隔开的所有选择器都会执行后面的样式。 (3)后代选择器:.nav ul li {} 类名为nav的元素下的ul元素下的li元素会执行后面的元素。 (4)子元素选择器:.demo > h5 {} 只有类名为demo的元素下的子元素h5会执行后面的样式。 |
属性选择器 (CSS3) | E[attr] E[attr=value] E[attr*=value] E[attr^=value] E[attr$=value] |
伪元素选择器 (CSS3) | E::first-letter E::first-line E::selection E::before E::after |
id选择器和类选择器的区别:一个类选择器可以被重复使用多次。一个id选择器只能被使用一次。
更多选择器参考:https://www.runoob.com/cssref/css-selectors.html
权重计算法则
选择器 | 权重 |
---|---|
继承、*通配选择器 | 0,0,0,0 |
标签选择器 | 0,0,0,1 |
类、伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内样式 | 1,0,0,0 |
!important | 无穷大 |
权重计算示例
p标签的文字颜色为:blue。