CSS基本选择器有类选择器、属性选择器和ID选择器。

CSS选择器的权重预示着CSS选择器样式渲染的先后顺序,元素样式渲染时,权重高的选择器样式会覆盖权重低的选择器样式。

通常将权重分为4个等级,可用0.0.0.0来表示这4个等级。

!important关键字优先级最高。

注意:!importont井非选择器,而是针对选择器内的单一样式设置的。当然,不同选择器内应用 !important的权重也是不一样的,例如,在id选择器内的!important关键字权重要高于类选择器内的 !important关键字权重,即下面所说的选择器权重组合。

内联样式(非元素器)的优先级可看成1.0.0.0。

ID选择器的优先级为0.1.0.0。

类属性选择器、属性选择器、伪类的优先级为0.0.1.0。

元素选择器、伪元素选择器的优先级为0.0.0.1。

通配符选择器对特殊性没有任何贡献值。

当把选择器组合使用的时候,相应的层级权重也会递增,例如# id .class的权重为0.1.1.0。

打开网易新闻 查看精彩图片

总结:

id选择器#id
#firstname 选择 id=“firstname” 的所有元素。
类选择器.class
.intro 选择
通配符* * 选择所有元素
标签选择器element
p 选择所有 p元素。
并级选择器element,element
div,p 选择所有 div 元素和所有 p 元素。
父子级element element
div p 选择 div元素内部的所有 p元素。
直接子级element>element
div>p 选择父元素为 div 元素的所有 p 元素。
相邻兄弟选择器element+element
div+p 选择紧接在 div 元素之后的所有 p 元素。
属性选择器[attribute]
[target] 选择带有 target 属性所有元素。
属性值选择器[attribute=value]
[target=_blank] 选择 target="_blank" 的所有元素。

css3新增常用选择器

:first-of-type
p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。
:last-of-type
p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。
:only-of-type
p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。
:only-child
p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。
:nth-child(n)
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。
:nth-last-child(n)
p:nth-last-child(2) 同上,从最后一个子元素开始计数。
:nth-of-type(n)
p:nth-of-type(2) 选择属于其父元素第二个 p 元素的每个 p 元素。
:nth-last-of-type(n)
p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
:first-child
p:first-child 选择属于父元素的第一个子元素的每个 p 元素。
:last-child
p:last-child 选择属于其父元素最后一个子元素每个 p 元素。