css选择器

选择器

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

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

选择器的种类

选择器	示例	说明
元素选择器	h1 { }	匹配对应标签的元素
通配选择器	* { }	匹配所有的元素
类选择器	.box { }	匹配对应class的元素
ID选择器	#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