CSS 选择器是用于选择 HTML 元素并应用样式的工具。
### 1. **基础选择器**
#### 1.1. **元素选择器**
选择所有指定的 HTML 元素。
```css
p {
color: blue; /* 所有 <p> 元素文本颜色为蓝色 */
}
```
#### 1.2. **类选择器**
选择具有特定类名的元素，类名以 `.` 开头。
```css
.button {
background-color: green; /* 所有 class="button" 的元素背景为绿色 */
}
```
#### 1.3. **ID 选择器**
选择具有特定 ID 的元素，ID 以 `#` 开头。
```css
#header {
font-size: 24px; /* ID 为 header 的元素字体大小为 24px */
}
```
#### 1.4. **通用选择器**
选择所有元素。
```css
* {
margin: 0; /* 所有元素的外边距为 0 */
}
```
### 2. **组合选择器**
#### 2.1. **后代选择器**
选择某个元素内的所有指定元素。
```css
div p {
color: red; /* 所有 <div> 内的 <p> 元素文本颜色为红色 */
}
```
#### 2.2. **子选择器**
选择某个元素的直接子元素。
```css
ul > li {
list-style-type: square; /* 所有 <ul> 的直接子 <li> 元素的列表样式为方块 */
}
```
#### 2.3. **相邻兄弟选择器**
选择紧接在某个元素后的同级元素。
```css
h1 + p {
margin-top: 20px; /* 紧接在 <h1> 后的 <p> 元素的上边距为 20px */
}
```
#### 2.4. **一般兄弟选择器**
选择某个元素后所有的同级元素。
```css
h1 ~ p {
color: gray; /* 所有在 <h1> 后的 <p> 元素文本颜色为灰色 */
}
```
### 3. **属性选择器**
#### 3.1. **存在属性选择器**
选择具有指定属性的元素。
```css
input[type] {
border: 1px solid black; /* 所有具有 type 属性的 <input> 元素边框为黑色 */
}
```
#### 3.2. **特定属性值选择器**
选择具有特定属性值的元素。
```css
input[type="text"] {
background-color: yellow; /* 所有 type 为 text 的 <input> 元素背景为黄色 */
}
```
#### 3.3. **属性值包含选择器**
选择属性值包含指定字符串的元素。
```css
a[href*="example"] {
color: orange; /* 所有 href 属性包含 "example" 的 <a> 元素文本颜色为橙色 */
}
```
### 4. **伪类选择器**
#### 4.1. **:hover**
选择鼠标悬停时的元素。
```css
a:hover {
text-decoration: underline; /* 鼠标悬停时，链接下划线 */
}
```
#### 4.2. **:first-child**
选择作为父元素第一个子元素的元素。
```css
li:first-child {
font-weight: bold; /* 每个 <ul> 或 <ol> 的第一个 <li> 元素加粗 */
}
```
#### 4.3. **:last-child**
选择作为父元素最后一个子元素的元素。
```css
li:last-child {
color: red; /* 每个 <ul> 或 <ol> 的最后一个 <li> 元素文本颜色为红色 */
}
```
#### 4.4. **:nth-child(n)**
选择作为父元素第 n 个子元素的元素。
```css
li:nth-child(2) {
background-color: lightblue; /* 每个 <ul> 或 <ol> 的第二个 <li> 元素背景为浅蓝色 */
}
```
### 5. **伪元素选择器**
#### 5.1. **::before**
在元素内容前插入内容。
```css
h1::before {
content: "Title: "; /* 在每个 <h1> 元素前插入 "Title: " */
}
```
#### 5.2. **::after**
在元素内容后插入内容。
```css
h1::after {
content: " - End"; /* 在每个 <h1> 元素后插入 " - End" */
}
```
### 6. **组合选择器的实例**
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选择器示例</title>
<style>
/* 基础选择器 */
p {
color: blue;
}
.button {
background-color: green;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
#header {
font-size: 24px;
}
/* 组合选择器 */
div p {
color: red;
}
ul > li {
list-style-type: square;
}
h1 + p {
margin-top: 20px;
}
h1 ~ p {
color: gray;
}
/* 属性选择器 */
input[type="text"] {
background-color: yellow;
}
/* 伪类选择器 */
a:hover {
text-decoration: underline;
}
li:first-child {
font-weight: bold;
}
/* 伪元素选择器 */
h1::before {
content: "Title: ";
}
</style>
</head>
<body>
<h1 id="header">CSS 选择器示例</h1>
<div>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</div>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<input type="text" placeholder="输入文本">
<a href="#">这是一个链接</a>
<button class="button">点击我</button>
</body>
</html>
```
### 总结
以上是 CSS 中常见的选择器及其用法示例。通过这些选择器，可以灵活地为 HTML 元素应用样式。希望这些信息对您有所帮助！如果您有其他问题或需要更详细的解释，请随时询问。
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
