自学CSS之选择器大全

选择器是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，推荐到原文档观看。