css选择器规则

CSS选择器规则
CSS（层叠样式表）是一种用于描述网页中元素样式的语言。

选择器是CSS中用来
选择要应用样式的HTML元素的一种方式。

选择器规则是由选择器和一组样式声明
组成的。

选择器的基本概念
选择器是用来选择要应用样式的HTML元素的模式。

选择器可以根据元素的标签名、类名、ID等属性进行选择。

元素选择器
元素选择器是最基本的选择器，它通过元素的标签名来选择元素。

例如，p选择器
可以选择所有的<p>元素。

p {
color: red;
}
上述代码将选择所有的<p>元素，并将它们的文本颜色设置为红色。

类选择器
类选择器通过元素的class属性来选择元素。

类选择器以.开头，后面跟着类名。

例如，.red选择器可以选择所有具有class="red"的元素。

.red {
color: red;
}
上述代码将选择所有具有class="red"的元素，并将它们的文本颜色设置为红色。

ID选择器
ID选择器通过元素的id属性来选择元素。

ID选择器以#开头，后面跟着ID名。

例如，#title选择器可以选择具有id="title"的元素。

#title {
font-size: 24px;
}
上述代码将选择具有id="title"的元素，并将它们的字体大小设置为24像素。

属性选择器
属性选择器通过元素的属性来选择元素。

属性选择器以[属性名=属性值]的形式出现。

例如，[type="text"]选择器可以选择所有type属性值为text的元素。

[type="text"] {
border: 1px solid gray;
}
上述代码将选择所有type属性值为text的元素，并将它们的边框样式设置为1像
素的灰色实线。

后代选择器
后代选择器用于选择某个元素的后代元素。

后代选择器使用空格分隔两个选择器。

例如，div p选择器可以选择所有在<div>元素内部的<p>元素。

div p {
margin: 10px;
}
上述代码将选择所有在<div>元素内部的<p>元素，并将它们的外边距设置为10像素。

子元素选择器
子元素选择器用于选择某个元素的直接子元素。

子元素选择器使用>符号分隔两个
选择器。

例如，div > p选择器可以选择所有直接作为<div>元素子元素的<p>元素。

div > p {
padding: 5px;
}
上述代码将选择所有直接作为<div>元素子元素的<p>元素，并将它们的内边距设置
为5像素。

兄弟选择器
兄弟选择器用于选择某个元素的兄弟元素。

兄弟选择器使用~符号分隔两个选择器。

例如，h1 ~ p选择器可以选择所有在<h1>元素后面的<p>元素。

h1 ~ p {
color: blue;
}
上述代码将选择所有在<h1>元素后面的<p>元素，并将它们的文本颜色设置为蓝色。

相邻兄弟选择器
相邻兄弟选择器用于选择某个元素的相邻兄弟元素。

相邻兄弟选择器使用+符号分
隔两个选择器。

例如，h1 + p选择器可以选择紧跟在<h1>元素后面的第一个<p>元素。

h1 + p {
font-weight: bold;
}
上述代码将选择紧跟在<h1>元素后面的第一个<p>元素，并将它们的字体加粗。

选择器的组合使用
在CSS中，可以将多个选择器组合使用，以选择更具体的元素。

多个选择器
多个选择器可以通过逗号分隔来同时选择多个元素。

例如，h1, h2, h3选择器可以
同时选择所有的<h1>、<h2>和<h3>元素。

h1, h2, h3 {
color: green;
}
上述代码将选择所有的<h1>、<h2>和<h3>元素，并将它们的文本颜色设置为绿色。

选择器的交集
选择器的交集可以通过将两个选择器连在一起来选择同时满足两个条件的元素。

例如，div.red选择器可以选择所有同时具有<div>标签和class="red"的元素。

div.red {
background-color: yellow;
}
上述代码将选择所有同时具有<div>标签和class="red"的元素，并将它们的背景颜
色设置为黄色。

选择器的并集
选择器的并集可以通过逗号分隔多个选择器来选择满足其中任意一个条件的元素。

例如，p, span选择器可以选择所有的<p>元素和<span>元素。

p, span {
font-size: 16px;
}
上述代码将选择所有的<p>元素和<span>元素，并将它们的字体大小设置为16像素。

选择器的优先级
当多个选择器同时应用于同一个元素时，CSS会根据选择器的优先级来决定应用哪
个样式。

选择器的优先级顺序
选择器的优先级顺序为：内联样式 > ID选择器 > 类选择器、属性选择器和伪类
选择器 > 元素选择器和伪元素选择器。

具体来说，内联样式具有最高的优先级，即在元素的style属性中直接定义的样式。

其次是ID选择器，然后是类选择器、属性选择器和伪类选择器，最后是元素选择
器和伪元素选择器。

选择器的特殊性
选择器的特殊性是用来计算选择器优先级的一个值。

特殊性由四个部分组成，分别是内联样式的特殊性、ID选择器的特殊性、类选择器、属性选择器和伪类选择器
的特殊性和元素选择器和伪元素选择器的特殊性。

特殊性的计算方式如下：
1.内联样式的特殊性为1000。

2.ID选择器的特殊性为100。

3.类选择器、属性选择器和伪类选择器的特殊性为10。

4.元素选择器和伪元素选择器的特殊性为1。

特殊性的计算是将上述四个部分的值相加得到的。

例如，div.red选择器的特殊性
为11（元素选择器的特殊性为1，类选择器的特殊性为10）。

选择器的权重
选择器的权重是用来计算选择器优先级的一个值。

权重由四个部分组成，分别是内联样式的权重、ID选择器的权重、类选择器、属性选择器和伪类选择器的权重和
元素选择器和伪元素选择器的权重。

权重的计算方式如下：
1.内联样式的权重为1000。

2.ID选择器的权重为100。

3.类选择器、属性选择器和伪类选择器的权重为10。

4.元素选择器和伪元素选择器的权重为1。

权重的计算是将上述四个部分的值相加得到的。

例如，h1 .red选择器的权重为11（元素选择器的权重为1，类选择器的权重为10）。

选择器优先级的比较
当多个选择器应用于同一个元素时，CSS会比较它们的特殊性和权重来决定应用哪
个样式。

如果两个选择器的特殊性和权重相同，那么后面出现的选择器会覆盖前面出现的选择器。

如果两个选择器的特殊性和权重不同，那么特殊性高的选择器会覆盖特殊性低的选择器。

总结
CSS选择器规则是用来选择要应用样式的HTML元素的一种方式。

选择器可以根据
元素的标签名、类名、ID等属性进行选择。

常见的选择器包括元素选择器、类选择器、ID选择器、属性选择器、后代选择器、子元素选择器、兄弟选择器和相邻兄弟选择器。

选择器可以通过组合使用来选择更具体的元素，例如多个选择器、选择器的交集和选择器的并集。

当多个选择器同时应用于同一个元素时，CSS会根据选择器的优先级来决定应用哪
个样式。

优先级的计算包括特殊性和权重的比较。

通过合理使用选择器规则，可以更精确地选择和应用样式，从而实现网页的美化和样式控制。