你知道的和你不知道的所有选择器。不包含尚未广泛实现的，也不包含已弃用的.

基本的选择器规则（Selector）

类型（Type）选择器

直接用标签匹配特定的元素 。

                        
                          span {
	...
}
p {
	...
}

                        
                      

类（Class）选择器

以 . 开头，匹配含有这个 class 的元素 。

                        
                          .info {
	...
}
p.info { /* 匹配含有 info 类的 p 元素 */
	...
}
.info.log { /* 匹配同时含有 info 和 log 类的元素 */
	...
}

                        
                      

ID 选择器

以 # 开头，匹配对应 id 的元素.

                        
                          #info {
	...
}
p#info {
	...
}

                        
                      

参数（Attribute）选择器

除了 id 和 class，也可以筛选其他参数进行匹配，并且除了全字匹配还提供了多重手段.

                        
                          /* 存在 title 的 <a> 元素 */
a[title] 

/* 存在 href 属性并且值为"https://example.org"*/
a[href="https://example.org"] 

/* 存在 href 属性并且内容包含"example"*/
a[href*="example"] 

/* 存在 href 属性并且以".org"结尾 */
a[href$=".org"] 

/* 存在 href 属性并且以"https"开头 */
a[href^="https"] 

/* class 用空格分割的列表中存在 logo。效果等于.logo。用于class这样空格分隔的属性 */
a[class~="logo"] 

/* 存在 lang 属性并且以"zh"或"zh-"开头。用于匹配lang属性*/
div[lang|="zh"]

/* i 表示忽略大小写 */
a[href="https://example.org" i] 

                        
                      

通配符

* 表示通配符，可以匹配任何元素。性能较低，谨慎使用.

组合选择器（Combinator）

组合选择器可以连接多个元素.

子选择器和后代选择器

子选择器用 > 表示，匹配第一个元素的直接后代的第二个元素（即 child）。后代选择器只需要用空格隔开，不要求是直接后代（即 descendant）.

                        
                          p span{ /* 所有 p 元素中的 span 元素 */
	color:red;
}
p > span{ /* 所有 p 元素中的直接子元素 span 元素 */
	color:blue;
}

                        
                      

                        
                          <p>
	<span>p span和p>span都匹配</span>
	<p>
	  <span>只匹配p span</span>
	</p>
</p>

                        
                      

注意 ：p.info 和 p .info 是不一样的.

兄弟选择器和相邻兄弟选择器

与上文类似，兄弟选择器用 + 表示，匹配第一个元素直接相邻之后的第二个元素。相邻兄弟选择器用 ~ 表示，只要求是兄弟（同一个父元素），不要求相邻.

                        
                          img + p /* 紧跟在img后面的p */
img ~ p /* 和img有相同父元素的p */

                        
                      

                        
                          <p>
	<img/>
	<p>匹配 img+p 和 img~p</p>
	<p>只匹配 img~p</p>
</p>

                        
                      

选择器列表

选择器列表用逗号 , 表示，用逗号连接的选择器共同使用规则.

                        
                          span, div{}
span, .info{}

                        
                      

注意 ：1. p span, .info 会匹配 p span 和 .info，而不是 p span 和 p .info，实现后者需要:is 2. 逗号选择器是阻塞的，如果其中一个标签不合法，整个规则都不会生效 。

伪类（Pseudo-Classes）

CSS 伪类是添加到选择器的一种关键字，表示这个元素的特殊状态。例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。但这个类并不真的在 class 中，所以叫伪类。伪类用 : 表示.

链接和按钮相关

常用:

• :link 表示未访问的链接，匹配尚未访问的链接，默认一般是蓝色。
• :visited 表示访问过的链接，一般是紫色。出于隐私限制，这个伪类用的越来越少。
• :hover 表示鼠标移向元素时的情况
• :active 表示鼠标正在点击元素的情况

                        
                          .info:link{
	color: blue;
}
.info:hover{
	color: red;
}
.info:active{
	color: purple;
}

                        
                      

                        
                          <a href="example">a link</a>

                        
                      

注意 ： 1. 有 href 属性的 a 标签才是链接，没有的不算。:link 也不只有 a 标签，其他标签的链接也可以（比如 link 标签）。 2. LVHA 规则：定义同一个链接多种情况的样式时，要按 link visited hover active 的顺序。这是因为他们的优先级相同，如果后出现的覆盖先出现的就会出现问题，比如将 hover 放到 active 后，那点击链接时两个伪类都满足，hover 会覆盖 active 导致 active 的设置不生效.

• :any-link 表示未访问的和已访问的链接，包括 link 和 visited。

表单输入相关

• :checked 表示正选中的单选框（radio），复选框（checkbox）和下拉菜单项（option）元素
• :default 表示单选框，复选框和下拉菜单项中默认的那个元素
• :disabled 表示被禁用的元素
• :enabled 表示被启用的元素
• :focus 表示获得焦点的元素
• :focus-within 表示获得焦点或者后代获得焦点的元素
• :focus-visible 表示获得焦点且焦点可见的元素。这是什么意思呢？
  对于一个 input 输入框，无论用鼠标点击它还是用 tab 切到它，样式都是一样的（一般是加上一圈 outline），符合人们的习惯。
  但是对于一个 button 来说，用鼠标点击它会触发 :focus ，而用 tab 切换到它也会触发 :focus（虽然没有按下去），这就有点奇怪了。

                        
                          <button> A </button>
<button> B </button>
<style> 
button:focus{ background-color: red;} /* tab 过去也生效 */
/*button:focus-visible{ background-color: green;*/}</style>

                        
                      

我们设定 :focus，显然是给鼠标按下去准备的，却忘了键盘 tab 获得焦点的情况。对于 button，用鼠标点击的时候，你知道自己在点哪，就不算 :focus-visible；而用 tab 切换或者 js 跳转时，你需要不一样的焦点提醒，此时 :focus-visible 生效，这样就可以区分二者。对于输入框来说，所有聚焦都触发 :focus-visible。取消掉注释，两种focus样式就不再相同了.

其实浏览器的默认样式就考虑到了，默认按钮点击时会变深，tab 时则是加上一圈 outline。自己的样式会让默认样式失效，如果需要精细的设计，就可以使用 :focus-visible。 一个案例 。

• :in-range 表示值在min到max范围内的输入框
• :out-of-range 表示值不在min到max范围内的输入框
• :indeterminate 表示“不确定”的表单元素，包括设置了 indeterminate 的选框，尚未选择的单选框，尚未完成的进度条。
• :valid 表示输入合法的输入框
• :invalid 表示输入不合法的输入框
• :required 表示设置必填的输入
• :optional 表示设置不是必填的输入
• :placeholder-shown 表示拥有 placeholder 的输入框
• :read-only 表示设置了只读属性的输入
• :read-write 表示可修改的输入
• :autofill 表示按下浏览器自动填充功能的输入框

DOM 子节点相关

• :empty 表示没有子元素的元素（文本节点也算元素，注释不算）。比如 <p>assa</p> 并不能匹配， <p></p> 才可以。
• :first-child 表示“是父元素的第一个子节点”。
• :last-child 表示“是父元素的最后一个子节点”。
• :first-of-type 表示“是父元素的第一个对应元素的子节点”。
• :last-of-type 表示“是父元素的最后一个对应元素的子节点”。

                        
                          <p>
 <span>p :first-child 或者 span:first-child</span>
 <a>p a:first-of-type</a>
 <a></a>
</p>

                        
                      

• :nth-child 后接整数或一次函数，选中特性序号的孩子节点。

                        
                          p :nth-child(2) /* 第二个孩子 */
p :nth-child(2n) /* 第2,4,6……个元素，n从0开始 */
p :nth-child(2n+1) /* 第1,3,5……个元素 */
p :nth-child(4n+3) /* 第4,7,10……个元素 */
p :nth-child(-n+3) /* 第3,2,1个元素 */

                        
                      

• :nth-last-child 同上，不过是倒着数
• :nth-of-type 同上，也就是 :first-child 和 :first-of-type 的区别，限定了元素
• :nth-last-of-type 同上。
• :only-child 表示没有其他兄弟的元素
• :only-of-type 表示没有其他相同元素兄弟的元素

DOM 相关的其他伪类

• :has 表示“拥有……”的，它的参数是一个逗号选择器列表。注意不能 has 嵌套。Firefox 暂不支持

                        
                          p:has(span, .info)  /* 含有 span或.info的 p */
h1:has(+h2) /* 满足h1+h2的 h1 */ 

                        
                      

• :is 和 :where 后接选择器列表，表示多选一。他们的区别是 is 计算优先级，而 where 不计入。 p :is(span, .info) 表示p span 和 p .info
• :not 后接选择器列表，和 is 相反，表示排除这些选项，选中不是这些元素的元素。
• :root 在 HTML 文档中，:root 就等于 <html> 元素

其他

• :modal 表示“模态”，即 js 用 showModal 构造的阻塞对话框的样式。 一个案例
• :lang 用于选中元素的语言属性
• :target 表示当前锚点代表的元素。比如当前 url 是 example.org#title ，那么 id 为 title 的元素就会被匹配
• :defined 表示所有的默认标签（div span）和用 js customElements.define 定义的自定标签，有了这个伪类，就可以把自定标签定义之前和之后区分
• :host 匹配所有 shadow root 的根元素，也可以加上括号， :host() 后接选择器，表示符合条件的根元素。
• :host-context 后接选择器，匹配在 shadow DOM 中符合条件的元素。

伪元素（Pseudo-elements）

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。但这个部分在 dom 中并不存在，所以叫做伪元素。用 :: 表示，但像伪类一样只打一个冒号也可以.

• ::after 在已选中元素之后再构造一个元素
• ::before 在已选中元素之前再构造一个元素
• ::first-letter 匹配本元素第一个字符
• ::first-line 匹配本元素第一个行
• ::marker 匹配一个 list 的元素的 marker，比如列表前面的数字序号和小圆点。
• ::placeholder 匹配输入框的 placeholder 文本
• ::selection 表示元素中被用户框选的部分

其他

• ::part 后接字符串，匹配 shadow tree 中满足part条件的元素
• ::file-selector-button 代表一个文件提交按钮
• ::cue 匹配这个元素的 WebVTT 提示
• ::slotted 匹配模板中的插槽元素
• ::target-text 匹配当前的文本锚点所在的文本。

最后此篇关于CSS3所有的选择器整理（2023.2）的文章就讲到这里了,如果你想了解更多关于CSS3所有的选择器整理（2023.2）的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。