常见CSS选择器及其用法总结今天来总结一下css中的选择器及其用法，CSS选择器是一种模式，用于选择需要应用样式的元素。

今天来总结一下css中的选择器及其用法。

元素选择器通过元素名称选择元素。例如，要为所有<p>元素设置样式：

p {
    color: blue;
}

类选择器使用点.后跟类名来选择具有特定类的元素。例如，要为类名为example的所有元素设置样式：

.example {
    background-color: yellow;
}

ID选择器使用井号#后跟ID名称来选择具有特定ID的元素。ID在一个HTML文档中要求是唯一的。例如，要为ID为example的元素设置样式：

#example {
    background-color: yellow;
}

属性选择器根据元素的属性及其值来选择元素。例如，要选择所有具有type="text"属性的<input>元素：

input[type="text"] {
    background-color: yellow;
}

后代选择器通过空格分隔两个元素选择器，选择第一个元素内部的第二个元素（所有的后代元素）。例如，要选择<div>内的所有<p>元素：

div p {
    background-color: yellow;
}

子选择器使用>连接两个选择器，不同于后代选择器，子选择器仅选择直接子元素。例如，要选择直接位于<div>内的<p>元素：

div > p {
    background-color: yellow;
}

相邻兄弟选择器使用+连接两个选择器，选择紧接在第一个元素之后的第二个元素，两个元素之间不能有其他元素。例如，要选择紧跟在.first类元素后的<p>元素：

.first + p {
    background-color: yellow;
}

通用兄弟选择器使用~连接两个选择器，选择在同一父元素下，第一个元素之后的所有第二个元素。例如：

h2 ~ p {
    background-color: yellow;
}

伪类选择器用于定义元素的特殊状态。例如，:hover伪类应用于鼠标悬停在元素上时的样式：

a:hover {
    color: red;
}

当然，伪类不止这一个，但用法是一样的。

伪元素选择器用于样式化元素的特定部分。例如，::before伪元素在元素内容前插入内容：

p::before {
    content: "注意：";
    color: red;
}

以上便是css选择器中常见的用法。