CSS 有哪些选择器呢?


摘要:
下文讲述css选择器的总览,如下所示:

CSS2常见选择器
选择器样式

说明

备注信息
通用选择器

*

类别选择器(.class)

.divTest

匹配class=”divTest”的所有元素
ID选择器(#id)

#divTest

匹配id=”divTest”的所有元素
标签选择器(element)

div

匹配所有<div>标签
后代选择器(element element)

div p

匹配<div>元素内部的所有<p>元素
子选择器(element>element)

div>p

匹配父元素为<div>的所有<p>元素
群组选择器(element,element)

div,p

匹配所有<div>和<p>元素
相邻同胞选择器(element+element)

div+p

匹配紧接在<div>之后的所有<p>元素
伪类选择器(:link :visited :active :hover :focus :first-child)

a:link a:visited a:active a:hover input:focus p:first-child

超链接的样式属性,文本框获取焦点时的属性变化,标签p元素下第一个子元素的样式
伪元素选择器(:first-letter :first-line :before :after :lang(language))

p:first-letter p:first-line p:before p:after p:lang(maomao)

选择每个 元素的首字母;选择每个 元素的首行;在每个 元素的内容之前插入内容;在每个 元素的内容之后插入内容;选择使用 “maomao” 开头的 lang 属性值的每个 元素
属性选择器([attribute] [attribute=value] [attribute~=value] [attribute|=value] )

[target=_blank]

[attribute~=value]选择包含一个以空格分隔的词为value的所有元素;[attribute|=value]选择属性的值等于value,或值以 value- 开头的所有元素
CSS3常见选择器
层次选择器

p~ul

选择前面有p元素的每个ul元素
伪类选择器

:first-of-type :last-of-type :only-of-type :only-child :nth-child(n) :nth-last-of-type(n) :last-child :root :empty :target :enabled :disabled :checked :not(selector)

属性选择器

[attribute*=value] [attribute^=value] [attribute$=value]