Appearance
CSS选择器（找到要美化的元素，核心重点）
5.1 基础选择器
元素选择器
定义：根据HTML标签名选择元素。
语法：
css
标签名 {
/* 样式 */
}示例：
css
/* 选择所有p元素 */
p {
color: #333;
font-size: 16px;
}
/* 选择所有h1元素 */
h1 {
color: blue;
font-size: 28px;
}类选择器（class）
定义：根据元素的class属性选择元素。
语法：
css
.class名 {
/* 样式 */
}示例：
html
<!-- HTML -->
<p class="highlight">这是一个高亮段落。</p>
<p>这是一个普通段落。</p>css
/* CSS */
.highlight {
color: #ff6600;
font-weight: bold;
background-color: #fff3cd;
}ID选择器（id）
定义：根据元素的id属性选择元素，id在页面中应该是唯一的。
语法：
css
#id名 {
/* 样式 */
}示例：
html
<!-- HTML -->
<div id="header">
<h1>网站标题</h1>
</div>css
/* CSS */
#header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}通配符选择器（*）
定义：选择页面中所有元素。
语法：
css
* {
/* 样式 */
}示例：
css
/* 重置所有元素的默认边距和内边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}5.2 复合选择器
后代选择器
定义：选择某个元素的所有后代元素。
语法：
css
父选择器 后代选择器 {
/* 样式 */
}示例：
css
/* 选择nav元素下的所有a元素 */
nav a {
color: #333;
text-decoration: none;
margin: 0 10px;
}子选择器
定义：选择某个元素的直接子元素。
语法：
css
父选择器 > 子选择器 {
/* 样式 */
}示例：
css
/* 选择ul元素的直接子元素li */
ul > li {
list-style-type: none;
margin: 5px 0;
}相邻兄弟选择器
定义：选择相邻的同级元素。
语法：
css
前一个元素 + 后一个元素 {
/* 样式 */
}示例：
css
/* 选择h1元素后面的第一个p元素 */
h1 + p {
font-size: 18px;
color: #666;
}并集选择器
定义：同时选中多个选择器对应的元素。
语法：
css
选择器1, 选择器2, 选择器3 {
/* 样式 */
}示例：
css
/* 同时选择h1、h2、h3元素 */
h1, h2, h3 {
color: #333;
font-family: Arial, sans-serif;
}5.3 伪类选择器
链接伪类
定义：设置链接在不同状态下的样式。
语法：
css
a:link { /* 未访问的链接 */ }
a:visited { /* 已访问的链接 */ }
a:hover { /* 鼠标悬停的链接 */ }
a:active { /* 正在点击的链接 */ }示例：
css
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: orange;
}结构伪类
定义：根据元素在文档中的位置选择元素。
常用结构伪类：
:first-child：选择第一个子元素:last-child：选择最后一个子元素:nth-child(n)：选择第n个子元素
示例：
css
/* 选择第一个li元素 */
li:first-child {
font-weight: bold;
}
/* 选择最后一个li元素 */
li:last-child {
color: red;
}
/* 选择第2个li元素 */
li:nth-child(2) {
background-color: #f0f0f0;
}5.4 选择器优先级详解
优先级规则
选择器的优先级从高到低：
- 行内样式（style属性）
- ID选择器（#id）
- 类选择器（.class）、伪类选择器（:hover）、属性选择器（[attribute]）
- 元素选择器（p, div, h1）
- 通配符选择器（*）
优先级计算
- 行内样式：1000
- ID选择器：100
- 类选择器、伪类选择器、属性选择器：10
- 元素选择器：1
- 通配符选择器：0
示例：
#header .nav a：100 + 10 + 1 = 111.nav a：10 + 1 = 11a：1
优先级规则
- 优先级高的样式会覆盖优先级低的样式
- 相同优先级时，后面的样式会覆盖前面的样式
- !important：可以强制提高样式的优先级，但应尽量避免使用
5.5 实战：用不同选择器美化导航栏、列表项
实战目标
创建一个导航栏和列表，使用不同的选择器美化它们。
实战步骤
- 创建HTML文件：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器实战</title>
<style>
/* 在这里添加CSS样式 */
</style>
</head>
<body>
<!-- 导航栏 -->
<nav id="main-nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<!-- 列表 -->
<div class="list-container">
<h2>产品列表</h2>
<ul class="product-list">
<li>产品1</li>
<li>产品2</li>
<li>产品3</li>
<li>产品4</li>
<li>产品5</li>
</ul>
</div>
</body>
</html>- 添加CSS样式：
css
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 导航栏样式 */
#main-nav {
background-color: #333;
padding: 10px 0;
}
#main-nav ul {
list-style-type: none;
display: flex;
justify-content: center;
}
#main-nav li {
margin: 0 15px;
}
#main-nav a {
color: white;
text-decoration: none;
padding: 5px 10px;
border-radius: 4px;
transition: background-color 0.3s;
}
#main-nav a:hover {
background-color: #555;
}
/* 列表样式 */
.list-container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
.list-container h2 {
color: #333;
margin-bottom: 20px;
text-align: center;
}
.product-list {
list-style-type: none;
}
.product-list li {
padding: 10px;
border-bottom: 1px solid #ddd;
transition: background-color 0.3s;
}
.product-list li:first-child {
font-weight: bold;
background-color: #e3f2fd;
}
.product-list li:last-child {
border-bottom: none;
}
.product-list li:hover {
background-color: #f0f0f0;
}- 运行页面：在浏览器中打开文件，观察效果
预期效果
- 导航栏：黑色背景，白色文字，悬停时背景变深
- 列表：第一个元素加粗并带有浅蓝色背景，悬停时背景变灰，最后一个元素没有下边框