css 选择器 - CSS (1)

📌 相关文章

📜 css 选择器 - CSS (1)

📅 最后修改于: 2023-12-03 14:40:22.280000 🧑 作者: Mango

CSS选择器

CSS选择器是指定一个或多个HTML元素的方式。选择器可以帮助您对HTML元素进行精确地控制，以便添加一些样式。在CSS中使用选择器时，使用的是 CSS规则。

使用选择器可以帮助您更快，更简单地构建CSS规则。以下是一些常见的CSS选择器：

类选择器

类选择器可以根据元素的类名选择元素。类名以 "." 开头。例如：

.my-class {
  background-color: red;
}

这将选择任何使用类名“my-class”的元素，并将它们的背景颜色更改为红色。

ID选择器

ID选择器可以根据元素的ID选择元素。ID名以 "#" 开头。例如：

#my-id {
  font-size: 18px;
}

这将选择ID为“my-id”的元素，并将其字体大小更改为 18px。

元素选择器

元素选择器可以选择所有指定元素的所有实例，如 <p> 或 <div>。例如：

p {
  text-align: center;
}

这将选择所有段落元素并将其文本对齐方式更改为居中。

后代选择器

后代选择器可以选择元素的后代。例如：

nav li {
  display: inline-block;
}

这将选择所有 <nav> 元素中的 <li> 元素，并将它们的显示方式更改为inline-block。

子元素选择器

子元素选择器可以选择元素的直接子元素。例如：

ul > li {
  margin-left: 20px;
}

此规则将确定在一个 <ul> 元素中选择直接子元素 <li> 元素，并将它们的左边距为 20px。

伪类选择器

伪类选择器可以匹配元素的状态或其他条件。例如，匹配具有:hover状态的元素：

a:hover {
  text-decoration: underline;
}

此规则将确定选择具有:hover状态的任何 <a> 元素，并为其添加文本下划线。

属性选择器

属性选择器可以根据元素的属性选择元素。例如，选择具有特定属性值的元素：

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

此规则将选择 type 属性为"text" 的任何 <input> 元素，并将其背景颜色更改为 #f0f0f0。

这只是一些常见的CSS选择器。有许多其他选择器可用，包括：相邻兄弟选择器，通用选择器和子串匹配选择器。要了解更多信息，请查看 W3Schools.

Markdown代码片段：

# CSS选择器

CSS选择器是指定一个或多个HTML元素的方式。选择器可以帮助您对HTML元素进行精确地控制，以便添加一些样式。在CSS中使用选择器时，使用的是 CSS规则。

使用选择器可以帮助您更快，更简单地构建CSS规则。以下是一些常见的CSS选择器：

## 类选择器

类选择器可以根据元素的类名选择元素。类名以 "." 开头。例如：

```css
.my-class {
  background-color: red;
}