CSS 选择器教程

CSS 选择器是网页样式设计的基础，它决定了网页元素如何显示。本教程将带你了解 CSS 选择器的各种类型和应用。

常见的选择器类型

标签选择器：直接使用 HTML 标签名选择元素。
- 例如：p 选择所有 <p> 标签。
类选择器：使用 . 加类名选择元素。
- 例如：.class-name 选择所有类名为 class-name 的元素。
ID 选择器：使用 # 加 ID 选择元素。
- 例如：#id-name 选择所有 ID 为 id-name 的元素。
属性选择器：根据元素的属性选择元素。
- 例如：[type="text"] 选择所有 type 属性为 text 的元素。
伪类选择器：根据元素的状态选择元素。
- 例如：:hover 选择鼠标悬停的元素。

实例

假设我们有一个简单的 HTML 页面：

<p class="text">这是一个段落。</p>
<div id="content">这是一个 div 元素。</div>
<input type="text" name="username">

我们可以使用以下 CSS 选择器来设置样式：

p.text {
    color: red;
}

#content {
    background-color: yellow;
}

[type="text"] {
    border: 1px solid black;
}

input[type="text"]:hover {
    background-color: lightblue;
}

以上代码将使段落文字为红色，div 元素背景为黄色，文本输入框边框为黑色，并且当鼠标悬停在文本输入框上时，背景变为浅蓝色。

扩展阅读

想要了解更多关于 CSS 选择器的知识，可以阅读 CSS 选择器参考。