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,用于重置默认样式。