了解CSS选择器的各种用法，提升元素选取效率
1. 基本选择器
CSS的基本选择器是最简单、最常用的选择器之一。它们通过HTML元素的标签名称、ID或class来定位元素。
a) 标签选择器：
使用HTML标签名称作为选择器，选取所有匹配的元素。例如，使用p选择器可以选取页面中的所有段落元素。
p {
/* CSS样式 */
}b) ID选择器：
使用HTML元素的ID属性作为选择器，选取唯一匹配的元素。ID选择器以“#”符号表示。例如，使用#header选择器可以选取页面中ID为“header”的元素。
#header {
/* CSS样式 */
}c) class选择器：
使用HTML元素的class属性作为选择器，选取所有具有相同class属性值的元素。class选择器以“.”符号表示。例如，使用.intro选择器可以选取页面中class为“intro”的所有元素。
.intro {
/* CSS样式 */
}2. 层次选择器
层次选择器允许根据元素在HTML结构中的位置来选择元素。
a) 后代选择器：
后代选择器通过空格分隔不同元素的选择器，选取所有满足条件的后代元素。例如，使用.parent .child选择器可以选取所有属于class为“parent”的元素内部的class为“child”的元素。
.parent .child {
/* CSS样式 */
}b) 子元素选择器：
子元素选择器通过“>”符号分隔父元素和子元素的选择器，选取满足条件的直接子元素。例如，使用.parent > .child选择器可以选取所有class为“parent”的元素直接包含的class为“child”的元素。
.parent > .child {
/* CSS样式 */
}c) 相邻兄弟选择器：
相邻兄弟选择器通过“+”符号分隔前一个元素和后一个元素的选择器，选取满足条件的紧邻的兄弟元素。例如，使用.element + .sibling选择器可以选取紧邻在class为“element”元素后面的class为“sibling”的元素。
.element + .sibling {
/* CSS样式 */
}3. 属性选择器
属性选择器根据HTML元素的属性来选择元素。
a) 存在属性选择器：
存在属性选择器选取具有特定属性的元素。例如，使用[type]选择器可以选取所有具有"type"属性的元素。
[type] {
/* CSS样式 */
}b) 等于属性选择器：
等于属性选择器选取具有特定属性值的元素。例如，使用[type="text"]选择器可以选取所有type属性值为"text"的元素。
[type="text"] {
/* CSS样式 */
}c) 子串匹配属性选择器：
子串匹配属性选择器选取具有特定属性值的元素。例如，使用[href^="https"]选择器可以选取所有href属性值以"https"开头的元素。
[href^="https"] {
/* CSS样式 */
}4. 伪类选择器
伪类选择器用于选取不同状态或行为的元素。
a) :hover伪类选择器：
:hover伪类选择器选取鼠标悬停在元素上的状态。例如，使用a:hover选择器可以选取所有鼠标悬停在链接上的元素。
a:hover {
/* CSS样式 */
}b) :active伪类选择器：
:active伪类选择器选取被点击的元素。例如，使用button:active选择器可以选取所有被点击的按钮元素。
button:active {
/* CSS样式 */
}5. 伪元素选择器
伪元素选择器用于选取元素的特定部分。
a) ::before伪元素选择器：
::before伪元素选择器在元素的内容前插入一个虚拟的元素。例如，使用::before选择器可以在元素的内容前插入一个图标。
.element::before {
/* CSS样式 */
}b) ::after伪元素选择器：
::after伪元素选择器在元素的内容后插入一个虚拟的元素。例如，使用::after选择器可以在元素的内容后插入一个文本提示。
.element::after {
/* CSS样式 */
}
上一篇