你了解CSS吗？——rules汇总(上)

*

任何元素都将被选择

E

选中HTML标签名为E的元素

E.warning

选中HTML标签名为E，且class属性值为“warning”的元素

E#myid

选中HTML标签名为E，且id属性值为“myid”的元素

E[foo]

选中HTML标签名为E，且E标签包含属性foo的元素

div[foo]将选中<div foo='xxx'></div>

E[foo="bar"]

选中HTML标签名为E，且包含属性名为foo，其值为bar的元素

div[foo="bar"]将选中<div foo="bar"></div>

E[foo~="bar"]

选中HTML标签名为E，且包含属性名为foo，其值是以空格分隔的单词列表，其中正好有一个值为bar

div[foo~="bar"]将选中<div foo="baa bar bac"></div>

E[foo^="bar"]

选中HTML标签名为E，且包含属性名为foo，其值以”bar“开头的元素

div[foo^="bar"]将选中<div foo="barxxx"></div>

E[foo$="bar"]

选中HTML标签名为E，且包含属性名为foo，其值以”bar“结尾的元素

div[foo^="bar"]将选中<div foo="xxxbar"></div>

E[foo*="bar"]

选中HTML标签名为E，且包含属性名为foo，其值包含子字符串”bar“的元素，该选择器的效果包含上面两种

div[foo^="bar"]将选中<div foo="xxxbarxxx"></div>

E[foo|="en"]

选中HTML标签名为E，且包含属性名为foo，其值包含以en开头且后接连字符-的元素

div[foo|="en"]将选中<div foo="en-xxx"></div>

:root

选中文档的根元素，始终指向html元素

E:nth-child(n)

选中E元素的父元素的第n个同类子元素

E:nth-last-child(n)

选中E元素的父元素的第n个同类子元素，从后向前数

E:nth-of-type(n)

选中E元素的父元素的第n个同类子元素（同:nth-child的区别见番外篇）

E:nth-last-of-type(n)

选中E元素的父元素的第n个同类子元素（同:nth-last-child的区别见番外篇）

E:first-child

选中E元素的父元素的第1个同类子元素

E:last-child

选中E元素的父元素的最后一个同类子元素

E:first-of-type

选中E元素的父元素的第一个同类子元素（见）

E:last -of-type

选中E元素的父元素的最后一个同类子元素（同:last-child的区别见番外篇）

E:only-child

选中E元素的父元素的唯一子元素（唯一表示”父元素不包含其他子元素“）

E:only-of-type

选中E元素的父元素下唯一类型的子元素(唯一类型表示”父元素下不包含其他该类型的元素，可以包含其他类型的元素“)

E:empty

选中一个没有子元素的E元素(包括文本节点)

E:link

选中的E 元素是其目标尚未访问的超链接的源锚点元素

E:visited

选中的E 元素是其目标已访问的超链接的源锚点元素

E:active

选中鼠标点击状态下的E元素

E:hover

选中鼠标悬停状态下的E元素

E:focus

选中获取焦点状态下的E元素(比如表单输入元素)

E:target

选中作为锚点目标的E元素

E:lang(fr)

选中属性lang="fr"的E元素

E:enabled

选中启用状态下的E元素(比如input元素，默认启用状态可以输入文本)

E:disabled

选中禁用状态下的E元素(比如包含属性disabled="disabled"的input元素)

E:checked

选中 处于选中状态的type="radio"的input元素 或 type="checkbox" 或 select元素中的option元素

E:not(s)

选中的E元素中排除s选择器选中的元素

E::first-line

选中E元素中文本的第一行

E::first-letter

选中E元素中文本的第一个文字或字母

E::before

在E元素之前生成内容

E::after

在E元素之后生成内容

E F

选中E元素的后代中的F元素

E > F

选中E元素的F子元素(不包含孙辈及以下后代)

E + F

选中紧跟在E元素之后的F元素

E ~ F

选中E元素后面的F元素(不一定是紧跟在E元素后面)