css中有哪些常见的选择器：header

CSS常见选择器指南：从基础到进阶

在CSS（层叠样式表）中，选择器是选择和操作HTML元素的核心工具，掌握常用的选择器是前端开发的基础技能之一，本文将介绍CSS中常见的选择器类型，帮助你更高效地编写样式。

元素选择器

这是最基础的选择器,直接使用HTML元素名称来选择元素。

p {
  color: red;
}

说明：所有 <p> 元素都会应用此样式。

类选择器

使用 .class 语法选择具有特定类名的元素。

.highlight {
  background-color: yellow;
}

说明：所有带有 class="highlight" 的元素都会应用此样式。

ID选择器

使用 #id 语法选择具有特定ID的元素。

}

说明：每个页面只有一个ID为 header 的元素，因此样式会唯一应用。

后代选择器

使用空格选择某个元素内部的所有后代元素。

div p {
  font-family: Arial;
}

说明：所有 <div> 内部的 <p> 元素都会应用此样式。

子元素选择器

使用 > 选择某个元素的直接子元素。

ul > li {
  list-style: square;
}

说明：只选择 <ul> 的直接子元素 <li>，不包括嵌套的 <li>。

伪类选择器

伪类用于选择元素的特定状态或位置,例如链接状态、焦点状态等。

a:hover {
  color: blue;
}
input:focus {
  outline: none;
}

常见伪类：

• :hover — 鼠标悬停时
• :active — 元素被激活时
• :first-child — 作为第一个子元素
• :nth-child(n) — 选择第n个子元素

属性选择器

通过元素的属性或属性值来选择元素。

img[src] {
  border: 1px solid #ccc;
}
a[href="https://example.com"] {
  text-decoration: none;
}

常见用法：

• [attr] — 存在属性
• [attr=value] — 属性值等于指定值
• [attr^=value] — 属性值以指定值开头

通配符选择器

使用 选择所有元素。

* {
  box-sizing: border-box;
}

说明：通常用于重置样式或设置全局属性。

否定选择器

使用 :not() 选择不符合条件的元素。

button:not(.submit) {
  background-color: gray;
}

说明：选择所有不是 .submit 类的按钮。

兄弟选择器

选择与某个元素相关的其他元素。

h1 + p {
  margin-top: 0;
}
h1 ~ p {
  color: green;
}

说明：

• h1 + p — 选择紧跟在 <h1> 后的 <p> 元素
• h1 ~ p — 选择 <h1> 后的所有 <p> 元素