CSS全称: cascading style sheets
谈谈css伪类与伪元素 这是我见过最全的伪类和伪元素总结
先来个练习题压压惊！
image.png
链接状态伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类测试</title>
<style type="text/css">
code {
background-color: #f9f2f4;
color: #c7254e;
padding-left: 2px;
padding-right: 2px;
margin-right: 5px;
}
a:link {
color: #0477C0;
text-decoration: none;
}
a:visited {
color: gray;
}
a:hover {
color: red;
}
a:active {
color: green;
}
</style>
</head>
<body>
<ul>
<li><code>:link</code>设置 a 元素在未被访问前的 CSS 样式</li>
<li><code>:visited</code>设置 a 元素在其链接地址已被访问过时的 CSS 样式</li>
<li><code>:hover</code>设置元素在其鼠标悬停时的 CSS 样式</li>
<li><code>:active</code>设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的 CSS 样式</li>
</ul>
<ul>
<li><a href="#1">链接1</a></li>
<li><a href="#2">链接2</a></li>
<li><a href="#3">链接3</a></li>
<li><a href="#4">链接4</a></li>
</ul>
</body>
</html>
结构化伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结构伪类测试</title>
<style type="text/css">
.item:first-child {
border-top: 1px solid red;
}
.item:last-child {
border-bottom: 2px solid gray;
}
.item:nth-child(even) {
color: red;
}
.item:nth-child(2n+1) {
color: blue;
}
.item:nth-child(4) {
background: #f5f5f5;
}
.item:nth-last-child(5) {
background: #ccc;
}
</style>
</head>
<body>
<ul class="list">
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item">Javascript</li>
<li class="item">Sass</li>
<li class="item">Less</li>
<li class="item">Node.js</li>
</ul>
<p>“:nth-child(n)”，n可以是数字（4）、关键词（odd,even）或公式（2n+1）</p>
</body>
</html>
上面代码的实际效果如下图：
image.png
再来个练习题醒醒脑！
image.png
文本首行缩进两个字符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文本样式</title>
<style>
p {
font-size: 18px;
color: #999;
line-height: 1.5em;
}
.text {
text-indent: 2em;
}
</style>
</head>
<body>
<!--
请设置 class 为 text 的 p 的样式，要求如下：
* 文字大小为“18px”，颜色为“#999”
* 行高为“1.5倍”
* 首行缩进两个文字
-->
<p class="text">我是带有class为text的段落</p>
<p>我是没有设置class为text段落</p>
</body>
</html>
绝对单位和相对单位
一个相素对应一个点，对于高清屏一个相素对应更多的点！
image.png
