示例

示例

说明

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

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