基本css选择器
关系选择器
联合选择器与反选择器
伪元素和伪类选择器
CSS选择器中,最常用的选择器如下:
选择器 | 描述 | 举例 |
* | 通配选择器,选择所有的元素 | * |
<type> | 选择特定类型的元素,支持基本HTML标签 | h1 |
.<class> | 选择具有特定class的元素。 | .class1 |
<type>.<class> | 特定类型和特定class的交集。(直接将多个选择器连着一起表示交集) | h1.class1 |
#<id> | 选择具有特定id属性值的元素 | #id1 |
属性选择器
除了最基本的核心选择器外,还有可以基于属性的属性选择器:
选择器 | 描述 | 举例 |
[attr] | 选取定义attr属性的元素,即使该属性没有值 | [placeholder] |
[attr="val"] | 选取attr属性等于val的元素 | [placeholder="请输入关键词"] |
[attr^="val"] | 选取attr属性开头为val的元素 | [placeholder^="请输入"] |
[attr$="val"] | 选取attr属性结尾为val的元素 | [placeholder$="关键词"] |
[attr*="val"] | 选取attr属性包含val的元素 | [placeholder*="入关"] |
[attr~="val"] | 选取attr属性包含多个空格分隔的属性,其中一个等于val的元素 | [placeholder~="关键词"] |
[attr|="val"] | 选取attr属性等于val的元素或第一个属性值等于val的元素 | [placeholder|="关键词"] |
关系选择器
有一些选择器是基于层级之间的关系,这类选择器称之为关系选择器。
选择器 | 描述 | 举例 |
<selector> <selector> | 第二个选择器为第一个选择器的后代元素,选取第二个选择器匹配结果 | .class1 h1 |
<selector> > <selector> | 第二个选择器为第一个选择器的直接子元素,选取第二个选择器匹配结果 | .class1 > * |
<selector> + <selector> | 第二个选择器为第一个选择器的兄弟元素,选取第二个选择器的下一兄弟元素 | .class1 + [lang] |
<selector> ~ <selector> | 第二个选择器为第一个选择器的兄弟元素,选取第二个选择器的全部兄弟元素 | .class1 ~ [lang] |
联合选择器与反选择器
利用联合选择器与反选择器,可以实现与和或的关系。
选择器 | 描述 | 举例 |
<selector>,<selector> | 属于第一个选择器的元素或者是属于第二个选择器的元素 | h1, h2 |
:not(<selector>) | 不属于选择器选中的元素 | :not(html) |
伪元素和伪类选择器
CSS选择器支持了伪元素和伪类选择器。
:active | 鼠标点击的元素 |
:checked | 处于选中状态的元素 |
:default | 选取默认值的元素 |
:disabled | 选取处于禁用状态的元素 |
:empty | 选取没有任何内容的元素 |
:enabled | 选取处于可用状态的元素 |
:first-child | 选取元素的第一个子元素 |
:first-letter | 选取文本的第一个字母 |
:first-line | 选取文本的第一行 |
:focus | 选取得到焦点的元素 |
:hover | 选取鼠标悬停的元素 |
:in-range | 选取范围之内的元素 |
:out-of-range | 选取范围之外的元素 |
:lang(<language>) | 选取lang属性为language的元素 |
:last-child | 选取元素的最后一个子元素 |
:link | 选取链接元素 |
:nth-child(n) | 选取第n个子元素 |
:nth-last-child(n) | 选取倒数第n个子元素 |
:nth-of-type(n) | 选取同类型的第n个元素 |
:nth-last-of-type(n) | 选择同类型的倒数第n个元素 |
:only-chid | 选择元素中唯一的子元素 |
:only-of-type | 选取元素中唯一与指定类型相同的元素 |
:required | 选取具有require属性的元素 |
:optional | 选取没有require属性的元素 |
:root | 选取文档的根元素 |
:target | 选取URL中锚点引用的元素 |
:valid | 选取表单中验证valid元素 |
:invalid | 选取表单中验证未通过验证的元素 |
:visited | 选取用于已经访问过的链接元素。 |