css选择器

选择器

选择器是css规则的一部分,它的作用是告诉浏览器将css规则作用于哪些元素。

css样式分为带作用域的样式(行内样式)和选择器样式,选择器是选择器样式规则的第一部分,选择器所选择的元素,叫做“选择器的对象”。

选择器的种类

选择器
示例
说明

h1 { }

匹配对应标签的元素

* { }

匹配所有的元素

.box { }

匹配对应class的元素

#unique { }

匹配对应id的元素

a[title] { }

匹配有特定属性的元素

p:first-child { }

匹配特定状态下的元素

p::first-line { }

插入一个不在DOM树中的新的HTML元素

article p

匹配所有子孙p元素

article > p

匹配子代p元素

h1 + p

匹配h1元素相邻的首个p元素

h1 ~ p

匹配h1元素所有兄弟p元素

选择器的优先级

优先级

下列三种类型的选择器优先级依次递减

元素选择器 < 类选择器 < ID选择器

从选择的范围来看,三者匹配的范围依次减少,可以理解为匹配范围越少,优先级就越大,ID选择器比元素选择器的匹配范围更小,因此ID选择器的优先级比元素选择器优先级高。

通配选择符(universal selector)(*关系选择符(combinators)(+, >, ~, ' ', ||)和 否定伪类(negation pseudo-class)(:not())对优先级没有影响。(但是,在 :not() 内部声明的选择器会影响优先级)。

行内样式

行内样式是带作用域的样式,因此优先级高于选择器样式。

!importance

当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。

不建议使用 !important ,因为一旦使用后此样式很难被覆盖,只有在迫不得已地情况下才使用,最好通过选择器优先级或行内样式来替代!important

一些经验法则:

  • 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important

  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important

  • 永远不要在你的插件中使用 !important

  • 永远不要在全站范围的 CSS 代码中使用 !important

最后更新于