跳到主要内容

选择器

优先级​

  • 赛高 !important(慎用) 无
  • 甲等 内联样式，如：style=”xxx” 1000
  • 乙等 ID 选择器，如：#id 100
  • 丙等 类、伪类和属性选择器，如.class、:hover、[attr] 10
  • 丁等 标签选择器，如 div、p 1
  • 戍等 通用选择器、子选择器和相邻兄弟选择器等，如*、>、+ 0

非常见选择器​

属性选择器​

[href]

[href="www.b.com"]

a[href^="#"]
/* 选择含有href属性值且以#开头的a标签 */
注意正则符号在属性名的后面，说明查找方式被限制了

交集选择器​

选择器1选择器2
AB

后代选择器​

选择器1 选择器2
A B

儿子选择器​

选择器1>选择器2
A>B

弟弟选择器​

选择器1～选择器2
A~B

相邻弟弟选择器​

选择器1+选择器2
A+B

从右向左匹配​

由于存在大量子节点，一开始匹配就能过滤掉很多不符合规则的子节点

匹配顺序： div span 例如先找到所有的 span 节点，然后往上看是否在 div 节点中，如果不再或到达根元素则舍弃掉

属性选择器支持正则​

*=
|=
^=
$=

a[href^="#"]
/* 选择含有href属性值且以#开头的a标签 */
注意正则符号在属性名的后面，说明查找方式被限制了