CSS常见的选择器及其权重⼤⼩
CSS需要借助选择器来实现对html框架中元素的精准定位，实现元素样式的编辑，由于需求不同CSS衍⽣出了⼗余种不同类型的选择器，它们的权重与功能各不相同：
选择器类型及权重：
选择器 权重
标签选择器/* 0001
class类选择器 0010
属性选择器 0010
伪类选择器 0010
伪元素选择器 0010
id选择器 00100
⾏内样式 1000
多个选择器 选择器权重之和
⼀、
标签选择器（元素选择器）：从HTML标签元素中直接选取，直接对框架内某个标签进⾏选择编辑，例如
,
，等等。
⼆、
类选择器：类选择器是可供编译者通过 class属性设置的选择器
例<p class=“类名（⾃定义）”>
tips：class属性的类名可以是多个，使⽤时⽤类名将其进⾏分隔，且多个类型名的html标签将会同时拥有这两个类名在css中设置的样式，若有重合则会优先权重较⾼或越后编辑的样式。
三、
id选择器：在html标签中通过 id 属性设置的选择器，id 选择器在css中的引⽤通过 # 实现
例<p id=“类名（⾃定义）”>
tips：
1.同⼀⽂档中，id名必须唯⼀
css选择器分为哪几类2.id选择器的权重⼤于class
四、
全局选择器（通配符选择器）：*，选取⽂档中所有的元素
五、
组选择器：多个选择器需要使⽤同⼀个css样式时，可将它们⽤“，”连接在⼀起
例
span,a {
}
六、
伪类选择器：
a：hover{}-----------设置元素a被⿏标悬停时的样式
a：link{}————–设置元素a超链接的默认样式
a:visited{}------------设置元素a超链接被访问后的样式
：active{}-----------设置元素被激活时的样式
：focus--------------设置元素获得输⼊焦点的样式
七、
后代选择器：选择某个元素的所有后代元素，选择器间⽤“ ”隔开
例：div p{}
⼋、
⼦选择器：⽤于选择某⼀元素的⼦元素，选择器间⽤>隔开
例：div>p{}
九、属性选择器：通过元素的属性或属性值来获取元素
a.[属性名]{样式} 选取具有某个属性的所有元素
例：
b.匹配元素[属性名]{样式} 选取具有某个属性且匹配前⾯的“匹配元素”的所有元素
c.[属性名1][属性名2]{样式} 选取具有多个属性的所有元素
e.[属性名=“属性值”]{样式} 选取具有某个属性且具有指定属性值的所有元素
f.[属性名~=“属性值1 属性值2 属性值3…”] 选取具有某个属性且包含 某个属性值的所有元素
g.[属性名l=“属性值”] 选取具有某个属性，且其属性值以某些字符串作为前缀，或属性值为该字符串，如测试1
测试2
[title|=“a”]{}，会选取到测试1和测试2
h.[属性名^=“字符串”] 选取具有某个属性，且属性值以某些字符开头的所有元素
i.[属性名$=“字符串”] 选取具有某个属性，且属性值以某些字符串做结尾的所有元素
j.[属性名*=“字符串”] 选取具有某个属性，且属性值中包含指定字符串的所有元素
⼗、
结构伪类选择器：⽤于选择⼀个结构中的某个元素
例:
：first-child 选取结构中第⼀个元素
⽗元素 :first-child 选取某个结构中的第⼀个元素
⽗元素 匹配对象:first-child 选取某个机构中的第⼀个元素，且这个元素必须和匹配对象向匹配
:
last-child 选取结构中最后⼀个元素
:nth-child(n) 选取结构中第n个元素
:nth-last-child(n) 选取结构中倒数第n个元素
元素类型:nth-of-type(n) 按类别查结构中的第n个元素
元素类型：nth-last-of-type(n) 按类型在结构中查倒数第n个元素
元素类型：first-of-type 按类型查结构中第⼀个符合某种类型的元素
元素类型：last-of-type 按类型查结构中最后⼀个符合某种类型的元素
⼗⼀、
伪元素选择器：常⽤的为元素选择器为::before / ::after
::before{
content:""} 在⼀个元素前⾯插⼊相应内容，常和content结合使⽤
:
:after{
content:"" 在⼀个元素后⾯插⼊内容，常和content结合使⽤
样式中必须要有content属性，但不⼀定需要赋值
以上就是常⽤的选择器，及使⽤⽅式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。