css类选择器大全

niko-ruo

已于 2022-12-07 10:10:06 修改

阅读量7.8k

点赞数 16

文章标签： vue.js 前端 javascript

于 2022-03-06 13:49:41 首次发布

本文链接：https://blog.csdn.net/weixin_45439337/article/details/123272242

版权

文章目录

一、常用的scc选择器？
二、伪元素以及伪类？

# 前言本文章立志于收集各种各样的css类选择器，先根据官方的参考手册，列举出其中的选择器，在以=以后接触到新的性质，或者是跟新出新的选择器，本文章也会做出相应的跟新。

一、常用的scc选择器？

最为基础的选择器：id选择器，类名选择器，标签选择器，*选择器。
选择器的权重排序：
id>class(属性选择器)>element(伪元素选择器)>星号(选择所有)
css选择器列举：
注意后代元素，子元素，父元素，父辈元素的区别

css选择器	效果
.class1.class2	选中同时拥有class1和class2的元素
.class1 .class2	选中class1样式后代元素的所有class2样式
element.class	选中class样式后代元素的所有element标签
element,element	同时选中两个标签元素
element1 element2	选中标签1后代元素下的所有标签2
element1>element2	选中所有父元素是element1的element2
element1+element2	选中element1元素下的第一个标签未element2的子元素
element1~element2	选中所有element1元素下所有的标签为element2的子元素
[attribute]	选中带有attribute属性的[attribute]元素
[attribute=value]	选中带有attribute属性且属性值为value的所有元素
[attribute~=value]	选中带有attribute属性且属性值包含"value" 的所有元素
[attribute\|=value]	选中带有attribute属性且属性值以"value" 开头的所有元素
[attribute^=value]	选中带有attribute属性且属性值以"value"开头的所有元素
[attribute$=value]	选中带有attribute属性且属性值以"value"结尾的所有元素
[attribute*=value]	选中带有attribute属性且属性值包含"value"子串的所有元素
[attribute*=value]	选中带有attribute属性且属性值包含"value"子串的所有元素
:active	选中活动元素
:link	选中未访过的元素
::after	在元素之后插入内容
::before	在元素之前插入内容
:checked	选中默认元素
:disabled	选中禁用状态的元素
:enabled	选中启用的元素
:empty	选中没有子元素的元素
:first-child	选中自己是父元素第一个子元素的元素
::first-letter	选中元素的首字母(p元素)
::first-line	选中元素的首行
:first-of-type	选中自己是父元素首个该类型子元素的元素
:focus	选中获得焦点的元素
:fullscreen	选中处于全屏模式的元素
:hover	选中指针位于其上的元素
:in-range	选中值在一定范围内的input元素
:indeterminate	选中处于不确定状态下的元素
:invalid	选中具有无效值的input元素
:lang(language)	选中lang属性为language的元素，languange是语言，有专门的代号指代
:last-child	选中父元素最后一个子元素(选择器前的标签规范的是被选中的元素，而不是其他元素)
:last-of-type	选中父元素最后一个指定类型的元素
:not(selector)	不是该选择器选中的所有元素（非逻辑）
:nth-child(n)	选中父元素的第n个子元素
:nth-last-child(n)	选择父元素的最后第n个子元素(逆向计数)
:nth-of-type(n)	根据上方理解
:nth-last-of-type(n)	根据上方理解
:only-of-type	选中其父元素的唯一类该元素的所有该元素
:only-child	选中其父元素的唯一一个该元素
:optional	选中不带‘required元素的input元素’
:out-of-range	选中超出指定范围的元素
::placeholder	选中给出placeholder属性的input元素
:read-only	选中具有只读属性的元素
:read-write	选中不具有只读属性的元素
:required	选中具有required属性的元素
:root	选中文档的根元素
::selection	选中用户已选用的元素
:target	选中当前活动的元素
:valid	选中带有有效值的input元素
:visited	选中已访问的元素

二、伪元素以及伪类？

css中添加伪元素以及伪类是为了格式化文档以外的内容，这些元素不在文档数中。
伪类：元素在不同状态下的为其设定不同的样式。修饰那些存在在DOM树中的元素，但是其所处于的状态不存在于DOM树中。
伪元素：在存在在DOM树中的元素前后添加一些元素，为其添加样式。虽然这些元素在页面上可以看到，但是其并不存在于DOM树中。

注意：
:link,:visited,:hover,:active等这些伪元素在IE6中只支持在a标签后使用
：active：点击链接时，链接成为活动的.
:link未被访问页面的链接.
:visited：已访问页面的链接.
:hover ：鼠标指针浮动到链接.
:default：只能作用于表单上，选中默认状态的表单元素
:has :满足一定条件后，匹配该元素前位元素,例如:content:has(> img),匹配到的是content
first-of-type和first-child的区别：
前者是首个该类型的子元素，后者是第一个子元素且满足于前面的标签。