选择器是CSS专有的元素，告诉浏览器HTML应该使用那种样式。下面总结下CSS使用的选择器
标签选择器
最最最简单的选择器开始，标签选择器
h1 {color: red;}
类选择器
.className {}
这个是最简单写法，带有标签写入
p.className {}
类选择器支持多个class
.className1 .className2 {}
id选择器
#idName {}
类似写法同上
标签属性选择器
a[title] {}
表示a标签有title属性
a[href="https://example.com"]
这个很好懂了 a标签 href属性等于.... 。下面表格罗列属性选择使用
| 选择器 | 示例 | 描述 |
|---|---|---|
[attr] |
a[tital] |
匹配带有一个名为attr的属性的元素——方括号里的值 |
[attr=value] |
a[href="https://example.com"] |
匹配带有属性attr，并且属性值等于value |
[attr~=value] |
p[class~="special"] |
匹配一个带有属性attr标签，属性值等于value，或者多个属性值中有一个值等于value，比如p标签有多个class， a1 a2 a3 p[class~="a1"] 可以选中 p a1 a2 a3 标签了 |
[attr|=value] |
div[lang|="zh"] |
匹配一个带有属性attr标签，属性值等于value,或者以value开头,后面紧随着一个连字符也能匹配 |
[attr^=value] |
li[class^="box-"] |
匹配带有属性attr,属性值value开头的字符即可匹配 |
[attr$=value] |
a[class$="-suf"] |
匹配带有属性attr，属性值value结尾的字符 |
伪类
什么是伪类，指选中特定特定状态的元素，比如a标签连接被点击后状态a:visited表示。
以下伪类列表
| 选择器 | 描述 | |
|---|---|---|
:active |
在用户激活元素的时候匹配，例如a标签被点击（瞬间） | |
:visited |
匹配已访问链接。 | |
:hover |
当用户悬浮元素上匹配 | |
:link |
匹配未曾访问的链接。 | |
:any-link |
匹配一个链接的:link和:visited状态。 |
|
:blank |
匹配空格input输入时 | |
:checked |
匹配已经被选中的单选、复选框 | |
:current |
匹配正在展示的元素，或者其上级元素 常见用法，搭配视频展示字幕 video:current(p span)
|
|
:future |
匹配当前元素之后的元素。用法参考current
|
|
:past |
当前元素之前的元素。用法参考current
|
|
:default |
只能作用在表单元素上，表示默认状态的表单元素 | |
:dir |
基于元素属性dir配置（dir是一个指示元素中文本方向的枚举属性） |
|
:disabled |
任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态 | |
:empty |
匹配不包含任何子元素的元素，元素的内容可以为文本或者空格 | |
:enabled |
匹配已启用的元素（被选择、单击、输入文本）或者能够获得焦点，那么它就是启用的 | |
:first |
@page at 规则一起使用。表示打印文档的第一页。（有关节点的第一个元素，请参阅 :first-child。） |
|
:first-child |
匹配兄弟节点（相同元素）第一个 | |
:last-child |
匹配兄弟节点（相同元素）最后一个 | |
:only-of-type |
匹配兄弟节点中某类型仅有的元素，意思在main 下仅仅存在一个p元素，就会被匹配到 |
|
:last-of-type |
||
:optional |
仅匹配不是必填的 form 元素。 | |
:out-of-range |
表示一个input元素，其值在max和min范围外 |
|
:in-range |
表示一个input元素，其值在max和min范围内，与:out-of-range作用相反 |
|
:placeholder-shown |
匹配显示占位文字的 input 元素。 | |
:playing |
匹配表示视频或者音频能播放、暂停的资源的，且正在“播放”的元素。 | |
:paused |
匹配代码视频或者音频能播放、暂停的资源，且正在“暂停”的元素 | |
:focus |
一个元素有焦点的时候匹配。 | |
:focus-visible |
一个元素有焦点的时候匹配。与:focus]区别在于 :focus-visible只有tab获取焦点才会触发 |
|
:focus-within |
表示当元素或其任意后代元素被聚焦时，将匹配该元素 | |
:indeterminate |
匹配未定态值的 UI 元素，通常为复选框、进度条 | |
:invalid |
匹配input元素invalid状态 |
|
:lang |
基于元素语言来匹配页面元素。用法 :lang(cn)后面匹配响应语言子元素列表中，最后一个给定类型的元素 |
|
:left |
需要和@规则 @page 配套使用，对打印文档的左侧页设置 CSS 样式 |
|
:right |
表示匹配右边 | |
:local-link |
匹配指向和当前文档同一网站页面的链接。 | |
:is() |
函数以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。用法 :is(p)
|
|
:not |
用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类 :not(.class)
|
|
:nth-child |
根据元素在父元素的子元素列表中的索引来选择元素，可以根据计算选择节点、奇数、偶数、n /3 | |
:nth-last-child |
从兄弟节点中从后往前匹配处于某些位置的元素 | |
:nth-of-type |
基于相同类型（标签名称）的兄弟元素中的位置来匹配元素,作用类似:nth-child,用法:nth-of-type(event|odd)
|
|
:nth-last-of-type |
基于元素在相同类型（标签名）的兄弟元素中相对最后一个元素的位置来匹配元素。 | 、 |
:read-only |
匹配元素不可被用户编辑的状态（如锁定的文本输入框）。 | |
:read-write |
代表一个元素（例如可输入文本的 input 元素）可以被用户编辑 | |
:required |
匹配form输入必填元素 |
|
:root |
匹配文档的根元素，整个html元素 | |
:scope |
匹配任何为参考点元素的的元素。当前，在样式表中使用时，:scope 等效于 :root，因为目前尚无一种方法来显式建立作用域元素 |
|
:valid |
匹配诸如input元素的处于可用状态的元素。 |
|
:target |
表示一个唯一的元素（目标元素），其 id 与当前 URL 片段匹配 |
伪元素
| 选择器 | 描述 |
|---|---|
::after |
匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
::before |
匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
::first-letter |
匹配元素的第一个字母。 |
::first-line |
匹配包含此伪元素的元素的第一行。 |
::selection |
匹配文档中被选择的那部分。 |
::spelling-error |
匹配文档中包含了浏览器标记的拼写错误的那部分。 |
关系选择器
后代选择器
body div span
表示匹配 body的后代div的后代span作用上，后代选择器主要特点就是子代和父
这不单止标签之间子代，类选择器也是可以的
.class p
子代关系选择器
div > p
子代关系选择器与后代选择器区别在于子代关系只能选择直接子级，例如现在有 p > span > a ,子代只能选择到span，a是p的后代选择器。
比邻选择器
img + p
代表 img、p为同级别元素，并且p紧挨着img，选择器只会选中p，而不用影响到img。
通用兄弟
p ~ img
p img 为同级别元素，p 、img都会被选择器匹配，这与比邻区别
关系选择器
ul > li[class="a"]
将上面选择器组合起来
以上内容主要搬运自MDN web doc，推荐到原文档观看。
网友评论