CSS常见的选择器

1. 元素选择器

 元素选择器是最基本的选择器，它根据 HTML 元素的名称来选择元素。比如 p 表示选择所有 <p> 元素。

示例代码：

cssCopy code

p { color: blue; }

说明： 这段代码将所有 <p> 元素的文字颜色设为蓝色。

2. 类选择器

内容解释： 类选择器以点（.）开头，用于选择具有特定类名的元素。一个 HTML 元素可以同时具有多个类，类名之间用空格分隔。

示例代码：

cssCopy code

.blue-text { color: blue; }

htmlCopy code

<p class="blue-text">这段文字颜色是蓝色。</p>

说明： 这里我们定义了一个类选择器 .blue-text，将该类应用于 <p> 元素，使其文字颜色变为蓝色。

3. ID 选择器

内容解释： ID 选择器以井号（#）开头，用于选择具有特定 ID 的元素。每个 HTML 元素只能有一个唯一的 ID。

示例代码：

cssCopy code

#main-header { font-size: 24px; }

htmlCopy code

<h1 id="main-header">这是一个标题</h1>

说明： 这里我们定义了一个 ID 选择器 #main-header，将该 ID 应用于 <h1> 元素，使其字体大小变为 24 像素。

4. 后代选择器

内容解释： 后代选择器（空格）用于选择指定元素的后代元素。它会选择所有满足条件的后代元素。

示例代码：

cssCopy code

article p { font-style: italic; }

htmlCopy code

<article> <p>这是文章的第一段。</p> <div> <p>这是文章的第二段，但仍然被选择。</p> </div> </article>

说明： 这里我们选择了所有 <article> 元素内部的 <p> 元素，并将其字体样式设为斜体。

5. 子元素选择器

内容解释： 子元素选择器（>）用于选择指定元素的直接子元素。

示例代码：

cssCopy code

ul > li { list-style-type: square; }

htmlCopy code

<ul> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul>

说明： 这里我们选择了所有 <ul> 元素的直接子元素 <li>，并将其列表样式设置为方块。

6. 伪类选择器

内容解释： 伪类选择器用于选择元素的特定状态或者位置，如 :hover、:active、:first-child 等。

示例代码：

cssCopy code

a:hover { color: red; }

htmlCopy code

<a href="#">鼠标悬停时变为红色</a>

说明： 这里我们定义了一个伪类选择器 a:hover，表示当鼠标悬停在 <a> 元素上时，将其文字颜色设为红色。

7. 通用选择器

内容解释： 通用选择器（*）匹配页面中的所有元素。

示例代码：

cssCopy code

* { margin: 0; padding: 0; }

说明： 这里我们使用通用选择器 *，将所有元素的外边距和内边距都设为 0，用于重置默认样式。