收集最全面的css和css3选择器 选择器的优先级 属性继承等功能

选择器

示例

说明

class

.test{color: red}

选择class="test"的标签

id

#test{color:red}

选择id="test"的标签

element

p{color: red}

选择所有 p 标签

element, element

div, p {}

选择所有div和p

后代

element element

ul li {border: 1px solid red;}

选择ul的所有li后代（包括儿子 孙子 重孙...）

:link

a:link {color: black;}

选择所有未访问链接

:visited

a:visited {color: red;}

选择所有访问过的链接

:hover

a:hover {color: #fff}

鼠标悬浮触发

:active

a:active {background: yellow;}

选择活动链接(按住鼠标不松开触发)

（注:在CSS定义中，:active必须位于:hover之后！）

:first-letter

h1:first-letter{font-size: 200%}

选择h1中以第一个字

:first-line

p:first-line {background: yellow}

选择每个<p>元素的第一行

选择器

示例

说明

*

* {padding: 0;}

选择所有标签

父子element>element

.list > li {border: 1px solid red;}

选择class="list"的所有儿子li

兄弟element+element

h1+p {color: red}

在h1后面选一个p兄弟

属性

[attribute]

[type] {display: block;}

选择带有 type 属性的标签

属性等于

[attribute=value]

[type=text] {display: block;}

选择type属性值为text的标签

属性包含

[attribute~=value]

[eyes~=小眼睛] {display:none}

选择所有eyes属性包含小眼睛的元素

(<span eyes="单眼皮 小眼睛">)

[attribute|=word]

[eyes|="小眼睛"]

（常与attribute^=value混淆）

选择eyes属性为小眼睛开头的元素；

这个值必须是完整的单词(或者后面跟着连字符" - ")

如：eyes="小眼睛-李荣浩"

:focus

input:focus{backgroundr:yellow;}

选择具有焦点的输入元素

大儿子

element:first-child

h1:first-child{color: red}

选择一个h1标签并且是其父元素的第一个元素

(h2:first-child 不会选中，因为h2是二儿子)

:before

span:before

在每个<span>元素之前插入内容

:after

span:after

在每个<span>元素之后插入内容

选择器

示例

说明

酒场兄弟

element1~element2

h1~p {color: red}

版本2的只能选一个兄弟，版本3能选h1后面所有p兄弟

属性开头

[attribute^=value]

[name^="李"]{border: 1px solid red;}

选择所有name属性以‘李’开头的元素，^ 类似正则

属性结尾

[attribute$=value]

img[src$=".png"]{width: 100%}

选择src 为 .png 结尾的 img 元素

（切记element后面不要带空格）

属性包含

[attribute*=value]

[name*="李"]{width: 100%}

选择所有name属性包含‘李’开头的元素

:first-of-type

li:first-of-type{}

选择所有li并且是其父元素的第一个

:last-of-type

li:last-of-type{}

选择所有li并且是其父元素的最后一个

:only-of-type

h2:only-of-type{}

选择一个h2并且它是唯一一个

(h1:only-of-type 不会选中因为不是唯一)

:only-child

h2:only-child{}

选择一个h2并且是其父元素的独子

(div1 生了4个所以选不了他的h2)

:nth-child(n)

div:nth-child(1){}

选择一个div并且是其父元素的第一个孩子

:nth-last-child(n)

div:nth-last-child(2){}

选择一个div并且是其父元素的倒数第二个孩子

:nth-of-type(n)

p:nth-of-type(2)

选择每个p元素是其父级的第二个p元素

:nth-last-of-type(n)

p:nth-last-of-type(2)

选择每个p元素的是其父级的倒数第二个p元素

小儿子

element:last-child

h1:last-child

选择h1标签并且是其父元素的最后一个孩子

:root

:root{background: red}

文档根元素伪类

:empty

h1:empty{}

选择一个h1标签并且没有子元素(空标签)<h1></h1>

id:target

#footer:target(:target)

选择当前处于活动状态的锚点标签(不加id为所有锚点)

:not(selector)

:not(p)

选择非 selector 元素的元素(即反选)

::selection

::selection{color: red}

选择光标选中的文字

:enabled

【主要用于表单元素】

input[type="text"]:enabled

选择器匹配每个启用的的元素

:disabled

【主要用于表单元素】

input[type="text"]:disabled

选择器匹配每个禁用的的元素

:checked

【主要用于表单元素】

input:checked

选择器匹配每个选中的输入元素

（仅适用于单选按钮或复选框）

:out-of-range

【主要用于表单校验】

input:out-of-range{color: red;}

选中【超出】设置范围的元素(input)

<input type="number" min="5" max="10" />

:in-range

【主要用于表单校验】

input:in-range{color:green}

选中输入值【未超出】指定范围的元素

:read-write

【主要用于表单元素】

input:read-write{border: 1px solid blue}

选中【可写】状态的input

:read-only

【主要用于表单元素】

input:read-only{background: gray;}

选中【只读】状态的input

:optional

【主要用于表单校验】

input:optional{border: 1px solid black}

选中【非必填】状态的input

:required

【主要用于表单校验】

input:required{border: 1px solid red}

选中【必填】状态的input

<input required />

:valid

【主要用于表单校验】

input:valid{color: green}

选中 输入email【合法】的input

<input type="email" />

:invalid

【主要用于表单校验】

input:valid{border: 1px solid red}

选中 输入email【不合法】的input

<input type="email" />

状态

示例

说明

:link

a:link

选择所有未被访问的链接

:visited

a:visited

选择所有已被访问的链接

:hover

a:hover

鼠标移动到元素上时

:active

a:active

点击正在发生时

:focus

input::focus

选择获得焦点的 input 元素

:root

:root

改变当前html所有样式

:empty

p:empty

对没有元素没有文本标签选中，如

选中,如果**

双方的

**选不中；

:first-child

p:first-child

选中父元素中第一个p,如果父元素第一个不是p选不中，如子元素第一个元素是p也会选中，

:first-of-type

p:first-of-type

选中父元素中第一个p，一直往下找，如子元素中有p也会选中，main>p:first-of-type只选取儿子

:last-child

p:last-child

选中父元素中最后一个p,如果父元素最后不是p选不中，如子元素中最后元素是p也会选中，main>p:last-child，只选取儿子

:last-of-type

p:last-of-type

选中父元素中最后一个p，一直往下找，如子元素中有p也会选中最后一个

:only-of-type

p:only-of-type

选择属于其父元素的唯一子元素的p,父元素有其他p选不中。如子元素有唯一p也会选中

:only-child

p:only-child

选择属于其父元素的唯一子元素的p,父元素有其他p选不中。

:nth-child(n)

p:nth-child(2)

选择父元素第二个元素，如果是p选中，反之。如子元素第二元素是p也选中

:nth-of-type(n)

p:nth-of-type(2)

选中父元素中第二个p，一直往下找，如子元素中有二个p也会选中，main>p:first-of-type只选取儿子

:nth-last-child(n)

p:nth-last-child(2)

同上从最后一个算

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上，从最后一个算

:not()

:not(p)

选中父元素除了p所有元素

选择器

示例

说明

:enabled

input:enabled

选择每个启用的 input 元素

:disabled

input:disabled

选择每个禁用的 input 元素

:checked

input:checked

选择每个被选中的 input 元素

:required

input:required

包含required属性的元素

:optional

input:optional

不包含required属性的元素

:valid

input:valid

验证通过的表单元素

:invalid

input:invalid

验证不通过的表单

状态

示例

说明

::first-letter

p:first-letter

选择每个元素的首字母

::first-line

p:first-line

选择每个元素的首行

::before

p:before

在每个元素的内容之前插入内容

::after

p:after

在每个元素的内容之后插入内容