CSS3 基础 - CSS3 选择器 - 元素选择器
一、课程导入
思考问题
- 什么是CSS选择器？它的作用是什么？
- 元素选择器是如何工作的？
- 如何使用元素选择器为HTML文档中的特定元素应用样式？
- 元素选择器在实际项目中的应用场景有哪些？
学习目标
- 理解CSS3元素选择器的基本概念
- 掌握元素选择器的语法和使用方法
- 学会使用元素选择器为HTML元素应用样式
- 了解元素选择器的优先级和特殊性
- 能够在实际项目中灵活运用元素选择器
二、核心知识点讲解
1. 元素选择器简介
元素选择器（Element Selector）是CSS中最基本、最常用的选择器之一，它通过HTML元素的标签名来选择元素。元素选择器会匹配文档中所有指定类型的元素，并为它们应用相同的样式。
元素选择器的语法：
元素名称 {
属性: 值;
/* 更多样式声明 */
}示例：
p {
color: blue;
font-size: 16px;
}
h1 {
color: red;
text-align: center;
}2. 元素选择器的工作原理
元素选择器的工作原理非常简单，它会遍历HTML文档中的所有元素，匹配与选择器名称相同的元素，并为这些元素应用指定的样式。
HTML文档结构：
┌─────────────────┐
│ <body> │
│ ┌─────────────┐ │
│ │ <h1>标题</h1> │ │ ← 匹配 h1 选择器
│ └─────────────┘ │
│ ┌─────────────┐ │
│ │ <p>段落1</p> │ │ ← 匹配 p 选择器
│ └─────────────┘ │
│ ┌─────────────┐ │
│ │ <p>段落2</p> │ │ ← 匹配 p 选择器
│ └─────────────┘ │
└─────────────────┘3. 元素选择器的使用方法
基本用法
使用元素选择器为所有相同类型的HTML元素应用样式：
/* 为所有段落元素设置样式 */
p {
font-family: Arial, sans-serif;
line-height: 1.6;
margin-bottom: 15px;
}
/* 为所有标题元素设置样式 */
h1, h2, h3, h4, h5, h6 {
color: #333;
font-weight: bold;
}组合使用
元素选择器可以与其他选择器组合使用，以实现更精确的选择：
/* 选择所有div元素中的p元素 */
div p {
color: #666;
}
/* 选择所有紧跟在h1元素后的p元素 */
h1 + p {
font-size: 18px;
font-weight: bold;
}4. 元素选择器的优先级
在CSS中，选择器的优先级决定了当多个选择器应用于同一个元素时，哪个选择器的样式会被应用。元素选择器的优先级较低，具体优先级如下：
| 选择器类型 | 优先级值 | 示例 |
|---|---|---|
| 元素选择器 | 1 | p |
| 类选择器 | 10 | .class |
| ID选择器 | 100 | #id |
| 内联样式 | 1000 | style="" |
| !important | 最高 | color: red !important; |
5. 元素选择器的特殊性
元素选择器的特殊性（Specificity）是指选择器的具体程度。元素选择器的特殊性较低，因为它会匹配文档中所有相同类型的元素。
特殊性计算规则：
- 元素选择器：0,0,0,1
- 类选择器：0,0,1,0
- ID选择器：0,1,0,0
- 内联样式：1,0,0,0
三、实用案例分析
案例一：基础文本样式设置
需求分析
创建一个简单的HTML页面，使用元素选择器为不同类型的文本元素设置样式。
实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素选择器示例</title>
<style>
/* 为所有段落元素设置样式 */
p {
font-family: 'Arial', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
margin-bottom: 15px;
}
/* 为所有一级标题设置样式 */
h1 {
font-family: 'Georgia', serif;
font-size: 28px;
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 2px solid #3498db;
}
/* 为所有二级标题设置样式 */
h2 {
font-family: 'Georgia', serif;
font-size: 22px;
color: #34495e;
margin-top: 30px;
margin-bottom: 20px;
}
/* 为所有列表元素设置样式 */
ul {
list-style-type: square;
margin-left: 20px;
margin-bottom: 15px;
}
li {
margin-bottom: 8px;
color: #555;
}
/* 为所有链接元素设置样式 */
a {
color: #3498db;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #2980b9;
}
</style>
</head>
<body>
<h1>元素选择器使用示例</h1>
<h2>什么是元素选择器？</h2>
<p>元素选择器是CSS中最基本的选择器，它通过HTML元素的标签名来选择元素。例如，使用<code>p</code>选择器可以选择文档中所有的段落元素。</p>
<h2>元素选择器的优点</h2>
<ul>
<li>语法简单，易于理解和使用</li>
<li>可以同时为多个相同类型的元素设置样式</li>
<li>适合设置全局样式，如字体、颜色等</li>
<li>与其他选择器组合使用，实现更复杂的选择逻辑</li>
</ul>
<h2>学习资源</h2>
<p>如果你想深入学习CSS选择器，可以参考以下资源：</p>
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors" target="_blank">MDN Web Docs - CSS选择器</a></li>
<li><a href="https://www.w3schools.com/css/css_selectors.asp" target="_blank">W3Schools - CSS选择器</a></li>
<li><a href="https://css-tricks.com/how-css-selectors-work/" target="_blank">CSS-Tricks - CSS选择器工作原理</a></li>
</ul>
</body>
</html>案例分析
- 使用了元素选择器为不同类型的HTML元素设置样式，包括
p、h1、h2、ul、li和a元素 - 为链接元素设置了 hover 状态的样式，实现了交互效果
- 通过组合使用元素选择器和伪类选择器，实现了更复杂的样式效果
- 样式设置清晰、有条理，便于维护和修改
案例二：页面布局基础
需求分析
创建一个简单的页面布局，使用元素选择器为不同的布局元素设置样式。
实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面布局示例</title>
<style>
/* 为body元素设置基础样式 */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
/* 为header元素设置样式 */
header {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
/* 为nav元素设置样式 */
nav {
background-color: #333;
color: white;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
/* 为main元素设置样式 */
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
background-color: white;
min-height: 400px;
}
/* 为footer元素设置样式 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
}
/* 为section元素设置样式 */
section {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
section:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<header>
<h1>页面布局示例</h1>
<p>使用元素选择器创建基础页面布局</p>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<main>
<section>
<h2>欢迎访问我们的网站</h2>
<p>这是一个使用元素选择器创建的基础页面布局示例。通过元素选择器，我们可以为HTML文档中的不同元素设置样式，实现页面的美化和布局。</p>
<p>元素选择器是CSS中最基本的选择器，它通过HTML元素的标签名来选择元素，为它们应用相同的样式。</p>
</section>
<section>
<h2>我们的服务</h2>
<p>我们提供以下服务：</p>
<ul>
<li>网站设计与开发</li>
<li>移动应用开发</li>
<li>UI/UX设计</li>
<li>数字营销</li>
</ul>
</section>
<section>
<h2>联系我们</h2>
<p>如果您有任何问题或需求，请随时联系我们。</p>
<p>邮箱：contact@example.com</p>
<p>电话：123-456-7890</p>
</section>
</main>
<footer>
<p>© 2026 示例网站. 保留所有权利。</p>
</footer>
</body>
</html>案例分析
- 使用了元素选择器为页面的不同布局元素设置样式，包括
body、header、nav、main、footer和section元素 - 结合使用了Flexbox布局实现导航菜单的水平排列
- 使用了伪类选择器
:last-child为最后一个section元素移除了底部边框 - 通过元素选择器的嵌套使用，为nav元素中的ul、li和a元素设置了特定的样式
- 实现了一个完整的、响应式的页面布局
三、实践练习
练习一：创建博客页面结构
要求：
- 使用HTML和CSS3创建一个简单的博客页面结构
- 包含标题、导航、文章列表、侧边栏和页脚等部分
- 使用元素选择器为不同类型的元素设置样式
- 确保页面布局合理，美观大方
- 为链接和按钮添加交互效果
练习二：比较不同选择器的优先级
要求：
- 创建一个HTML页面，包含多个不同类型的元素
- 使用元素选择器、类选择器和ID选择器为同一个元素设置不同的样式
- 观察并分析不同选择器的优先级
- 理解CSS优先级规则的应用
四、课程总结
核心知识点回顾
- 元素选择器是CSS中最基本的选择器，通过HTML元素的标签名来选择元素
- 元素选择器的语法简单：
元素名称 { 属性: 值; } - 元素选择器会匹配文档中所有指定类型的元素，并为它们应用相同的样式
- 元素选择器的优先级较低，具体为1
- 元素选择器可以与其他选择器组合使用，实现更复杂的选择逻辑
学习建议
- 熟练掌握元素选择器的基本用法，这是学习其他选择器的基础
- 理解元素选择器的优先级和特殊性，避免样式冲突
- 学会合理组织CSS代码，使用注释提高代码的可读性
- 多做实践练习，通过实际项目巩固所学知识
- 关注CSS3的最新发展，了解新的选择器特性
下一步学习
- 学习类选择器的使用方法
- 掌握ID选择器的应用场景
- 了解属性选择器的高级用法
- 探索伪类和伪元素选择器的功能
通过本课程的学习，相信你已经掌握了CSS3元素选择器的基本概念和使用方法。元素选择器是CSS中最基础、最常用的选择器之一，它为我们提供了一种简单、有效的方式来为HTML元素应用样式。在后续的学习中，我们将继续探索其他类型的CSS选择器，进一步提高我们的样式设计能力。