常用的css选择器有哪些

CSS选择器的概述

CSS选择器是用于在HTML文档中选择特定元素并对其应用样式的工具，它们可以基于元素的标签名、类名、ID、属性等特征来选取目标元素，本文将详细介绍常用的CSS选择器及其用法，帮助你更好地掌握CSS选择器的使用技巧。

常用CSS选择器分类

1、元素选择器

元素选择器是最基础的选择器，它根据元素的标签名来选取目标元素。

p {
  color: red;
}

这段代码将选中所有<p>标签内的文本颜色设置为红色。

2、类选择器

类选择器用于选中具有特定类名的元素，类名需要放在一个.符号后面。

.my-class {
  font-size: 16px;
}

这段代码将选中所有具有my-class类名的元素，并将其字体大小设置为16像素。

3、ID选择器

ID选择器用于选中具有特定ID的元素，ID需要放在一个符号后面，注意，页面中只能有一个具有某个ID的元素。

my-id {
  background-color: yellow;
}

这段代码将选中具有my-id ID的元素，并将其背景颜色设置为黄色。

4、属性选择器

属性选择器用于选中具有特定属性的元素。

a[target="_blank"] {
  text-decoration: none;
}

这段代码将选中所有<a>标签的target属性值为_blank的元素，并移除其下划线装饰。

5、伪类选择器

伪类选择器用于选中特定状态下的元素。

a:hover {
  text-decoration: underline;
}

这段代码将选中鼠标悬停在其上的所有<a>标签，并将其下划线装饰设置为虚线。

6、伪元素选择器

伪元素选择器用于选中元素的特定部分，如首字母、首行等。

p::first-letter {
  font-size: 24px;
}

这段代码将选中所有<p>标签的第一个字母，并将其字体大小设置为24像素。

7、组合选择器(复合选择器)

组合选择器用于同时选中多个不同类型的元素，常见的组合选择器有以下几种：

后代选择器(descendant selector):用空格分隔，表示选中目标元素的所有后代元素。div p { color: red; } 将选中所有<div>标签下的<p>标签，并将其文本颜色设置为红色。

子代选择器(child selector):用空格分隔，表示选中目标元素的所有直接子元素。div > p { color: red; } 将选中所有作为<div>标签直接子元素的<p>标签，并将其文本颜色设置为红色，注意，这里的子代选择器只适用于HTML中的嵌套关系，对于SVG或MathML等非HTML文档结构，需要使用其他组合选择器。