引言
CSS3 作为前端界面设计的核心技术，为开发者提供了丰富的样式控制能力和视觉效果实现方案。本专栏专栏将系统梳理 CSS3 的核心知识点，并通过丰富的实战案例帮助你掌握各种CSS3 的精髓，从基础选择器到高级动画效果，全方位面覆盖 CSS3 开发的关键技术点。
一、CSS 样式基础
1.1 CSS 样式类型
CSS 样式主要有三种形式，分别适用于不同的场景：
- 内联式样式：直接写在元素的 style 属性中，仅作用于当前元素
-
嵌入式嵌入式样式：写在
<style>标签中，作用于当前文档 -
外部外部样式：写在独立的 CSS 文件中，通过
<link>标签引入，可被多个文档共享
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式类型示例</title>
<!-- 嵌入式样式 -->
<style type="text/css">
p {
font-size: 30px;
color: blue;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<!-- 内联式样式 -->
<div style="width: 100px;height: 100px;background-color: red;"></div>
<p>Hello world</p>
<span>测试文字</span>
</body>
</html>
1.2 CSS 选择器
选择器是 CSS 的核心，用于精准定位需要设置样式的元素：
-
通用选择器：
*匹配所有元素 -
ID 选择器：
#id匹配指定 ID 的元素 -
类选择器：
.class匹配指定类的元素 -
标签选择器：
tag匹配指定标签的元素 -
子选择器：
parent > child匹配父元素的直接子元素 -
后代选择器：
ancestor descendant匹配祖先元素的所有后代元素 -
群组选择器：
selector1, selector2同时匹配多个选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器示例</title>
<style type="text/css">
#ctx {
color: red; }
span {
color: orange; }
/* 通用选择器 */
*{
}
/* 子选择器 */
ul>a {
color: red; }
/* 群组选择器 */
div,input {
background-color: yellow; }
#ctx,span {
font-size: 50px; }
</style>
</head>
<body>
<ul>
<a href="#">扩展</a>
<li>语文</li>
<li>数学<a href="#">浏览</a></li>
<li>英语<div><h1><a href="#">PPP</a></h1></div></li>
</ul>
<div id="ctx">aaa</div>
<span class="bg">hehe</span>
<span class="bg">bbb</span>
<span class="bg">******</span>
<input type="text" class="bg" />
<span>lop</span>
</body>
</html>
1.3 伪类与伪元素选择器
-
伪类：用于定义元素的特殊状态，如
:hover、:active、:focus等 -
伪元素：用于设置元素的特定部分的样式，如
::first-letter、::before、::after等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器示例</title>
<style type="text/css">
#inp:active {
border: 5px red solid; }
#inp:focus {
font-size: 50px; }
div:hover {
color: orange; }
a:link {
color: deeppink; text-decoration: line-through; }
a:visited {
color: green; }
li:first-child {
color: red; }
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<input id="inp" type="text" />
<div>Hello world</div>
<a href="#">浏览</a>
</body>
</html>
伪元素示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素选择器示例</title>
<style type="text/css">
p::first-letter {
font-size: 50px; }
#myDiv::first-line {
color: red; }
#link {
position: relative;
display: inline-block;
text-decoration: none;
padding: 5px 10px;
}
#link:hover::before {
content: '\5B';
position: absolute;
left: -20px;
}
#link:hover::after {
content: '\5D';
position: absolute;
right: -20px;
}
</style>
</head>
<body>
<a id="link" href="#">示例链接</a>
<p>举头望明月，低头思故乡</p>
<div id="myDiv">
第一行文字<br>
第二行文字<br>
第三行文字
</div>
</body>
</html>
二、CSS 核心概念
2.1 CSS 权重
CSS 权重决定了当多个样式规则应用于同一元素时，哪个规则会被优先应用：
- 内联样式：1000
- ID 选择器：100
- 类选择器、伪类、属性选择器：10
- 标签选择器、伪元素：1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS权重示例</title>
<style type="text/css">
* {
color: red; } /* 0,0,0,0 */
div {
color: yellow; } /* 0,0,0,1 */
div span {
color: green; } /* 0,0,0,2 */
span[id] {
color: orange; } /* 0,0,1,1 */
#sp1 {
color: pink; } /* 0,1,0,0 */
