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名必须唯一
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属性，但不一定需要赋值

以上就是常用的选择器，及使用方式。