了解css选择器的语法及其权重

css选择器的语法及其权重

我们都知道web网页的三大组成是结构（html）、表现（css）和行为（js）。那么，今天我们就来聊一聊css的一些常用的选择器和它们的权重。
CSS呢？顾名思义就是层叠样式表（Cascading Style Sheet(s)），
如果把HTML比喻成盖楼，那么CSS就是给房子装修。

如何给房子装修呢？

首先就要知道CSS 的语法啦,CSS的语法为：

选择器：就是你想要修改或者修饰的对象，任何对象都可以，如div、p、span等等。
声明由属性和属性值组成。
知道了css的语法，接下来我们来瞧瞧css常用的选择器都有哪些？及其所对应的权重如何计算？
一、选择器的分类
可以分为五大类，分别是基本选择器，层次选择器，伪类选择器，伪对象选择器和属性选择器。

（1）基本选择器（权重是0001）
a.类型选择器（也可叫做元素或者标签选择器）
语法：标签{}
b.class选择器（权重是0010）
语法：.class名字{}
c.Id选择器（权重是0100）
语法：#id名字{}
d.群组选择器（群组选择器整体是没有权重的，但是独立的选择器是有权重的）
语法：选择器1，选择器2，选择器3{}
e.全局选择器（通配符）（权重是0000）
语法：*{}
注意点：【1】 . class前面的这个点不能丢，class可以起多个名字。
【2】 id前面用的是#，id的名字是唯一的。
【3】群组选择器可以用来优化代码，就是让有相同的样式放在一起，从而 使代码量减少。
【4】全局选择器一般用来清除默认的样式或重置样式。

2）层次选择器（权重是算和的）

用在包含的结构上的：包含选择器（子代选择器）和子选择器。

a.包含兄弟选择器：
语法：父元素 子元素{}
析：父元素和子元素可以不相邻。即只要子元素在父元素的包围圈中，就可以生效。
eg：.box p{}
权重为：10+1=11；.box是类选择器，权重是10，p是基本选择器，权重是1，相加即可。
意思为在class名为.box下面的所有p标签。

b.子选择器
语法：父元素>子元素
析：父元素与子元素必须相邻。
eg：.box p{}
权重为：10+1=11；.box是类选择器，权重是10，p是基本选择器，权重是1，相加即可。
意思为在class名为box下面的第一个p。

B.用在并列结构上的：相邻兄弟选择器和通用兄弟选择器

a.相邻兄弟选择器
语法：选择器1+选择器2{}
析：实现的是选择器1最近的选择器2的对象。
注意：与.box要并列，只有并列才生效，被.box包含的p不生效。
eg：.box+p{}
意思是：选择.box后面的第一个兄弟元素。
权重为：10+1=11；.box是类选择器，权重是10，p是基本选择器，权重是1，相加即可。

b.通用兄弟选择器
语法：.box~p{}
析：选择.box后面的所有p元素。
注意：与.box要并列，只有并列才生效，被.box包含的p不生效。

伪类选择器：
1.a：link{} 链接初始的样式 指的是a标签
2.a：visited{} 访问过后的样式 指的是a标签
3.：hover{} 鼠标悬停时的样式 可以是任何标签
4.a：active{} 鼠标按住不动时的样式
5.input：focus{} 选择获取焦点的输入字段之后的样式
注意点：如果前四个同时给a的情况下，顺序不能打乱，并且要清楚浏览器的缓存。

本文地址：https://blog.csdn.net/m0_46369594/article/details/107284313