前端三剑客--CSS（第 2 节）
目录
内容回顾：
CSS选择器***
属性选择器
伪类选择器
1）:link 超链接点击之前
2）:visited 超链接点击之后
3）:hover 鼠标悬停在某个标签上时
4）:active 鼠标点击某个标签时，但没有松开
5）:focus 某个标签获取焦点时的状态
部分伪类选择器样例示范：
：checked
：first-child
：last-child
：nth-child(n)
案例：实现表格隔行变色效果。
伪元素选择器
伪元素的运用案例：
常见样式
基本语法
常见样式
编写样式：index.css
编写页面，index.html
内容回顾：
CSS的几种写法：
1.行内样式
2.内嵌样式
3.外链样式
4.@import
CSS选择器***
在CSS中，对于元素的修饰是通过选择器来获取到的，它有很多选择器。
---基本选择器
---包含选择器
---属性选择器
---伪类选择器
CSS选择器***
属性选择器
由于在HTML中标签的属性是很重要的元素，所以CSS中也提供了直接可以通过标签属性的方式来获取元素。属性选择是在使用过程需要使用到中括号（[ ]）
举例示范：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 需求1：获取页面中所有带有 class 属性的元素 */
[class] {
color: blueviolet;
}
/* 需求2：获取带有 class 属性，并且值为 container 的元素 */
.container[class] {
color: white;
background-color: blue;
}
/* 需求3：获取页面中所有 div 且带有 title 属性的元素 */
div[title] {
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid #0000ff;
}
/* 需求4：获取页面中所有 input 元素且有 type 属性的，同时这个属性的值必须是
text 的所有元素 */
input[type="text"] {
color: red;
border: 1px solid blue;
}
/* 需求5：获取所有 input 元素的 type 属性的值中包括字母 e 的所有元素 */
input[type*='e'] {
background-color: aquamarine;
}
/* 需求6：获取type属性的值中以字母 e 开头的所有元素 ^ 这个指的是开头 */
input[type^='e'] {
border: 1px dotted orange;
outline: none;
}
/* 需求7：获取 type 属性的值中以 rl 结尾的所有元素 $ 这个指的是结尾 */
input[type$='rl'] {
color: brown;
}
/* 需求8：通过类样式为 msg 元素来获取它的下一个元素 p + p 获取什么元素就用+ 相应的元素 */
div.msg + p {
border: 1px solid #ff0000;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">这是一个容器</div>
<p>第一个段落</p>
<p>第二个段落</p>
<div title="这是标题">这是第二个容器</div>
<input type="text" name="company" value="西安鸥鹏">
<input type="url" name="url" value="www.xianoupeng.com">
<input type="email" name="email" value="li@xianoupeng.com">
<hr>
<div class="msg">这是个人信息</div>
<p id="msg2">第三个段落</p>
</body>
</html>
属性选择器说明：
1.要使用属性选择器，必须合适中括号
2.可以直接使用属性，也可以使用属性名 = “属性值”的方式
3.还可以使用包含（*）、以什么开头（^）、以什么结尾（$）的方式来获取
4.加号（+）表示某个元素之后紧跟着的第一个元素
伪类选择器
同一个标签，在不同的状态下，它具有不同的样式，这就叫伪类样式。伪类选择器使用冒号（：）来表示。
常见的状态主要有以下几种：
1）:link 超链接点击之前
2）:visited 超链接点击之后
3）:hover 鼠标悬停在某个标签上时
4）:active 鼠标点击某个标签时，但没有松开
5）:focus 某个标签获取焦点时的状态
举例示范：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/* 超链接点击之前的颜色 */
a:link {
color: orange;
}
/* 超链接点击之后的颜色 */
a:visited {
color: brown;
}
/* 鼠标移动到元素上的效果，注意不能移开鼠标 */
a:hover {
text-decoration: none;
}
/* 按住鼠标不松开的效果 */
a:active {
color: red;
}
/* 元素获取焦点的效果 */
input[type]:focus {
border: 1px solid #ff0000;
outline: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="https://www.taobao.com" target="_blank">淘宝</a>
<br>
<input type="text" name="name">
</body>
</html>
页面显示如下：
部分伪类选择器样例示范：
在CSS中伪类选择器有很多
：checked
这个伪类选择器，是用于获取所有选中的元素。
：first-child
选择器匹配属于任意元素的第一个子元素的元素
：last-child
选择所有指定元素的最后一个子元素
：nth-child(n)
选择所有p元素的父元素的第二个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:nth-child</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none; /*去掉小圆点*/
}
ul li {
width: 200px;
height: 25px;
background-color: orange;
margin-top: 2px;
padding-left: 5px;
}
/*
ul li:first-child + li {
color: white;
}*/
/* 奇数行为白色 */
ul li:nth-child(odd) {
color: white;
}
/* 偶数行为兰色 */
ul li:nth-child(even) {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
案例：实现表格隔行变色效果。
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格隔行变色</title>
<style>
table {
width: 500px;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-collapse: collapse;
}
td,th {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
text-align: center;
}
tr:nth-child(odd) {
background-color: #cccccc;
}
tr:first-child {
background-color: grey;
}
</style>
</head>
<body>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
</table>
</body>
</html>
伪元素选择器
在CSS3中出现了伪元素选择器，我们常用的有两个：
--- ::before 它是在元素的内容之前添加前前缀内容
--- ::after 它是在元素的内容之后添加后缀内容
伪元素的运用案例：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器运用</title>
<style>
.container {
width: 300px;
height: 200px;
background-color: #0B133A;
border: 2px solid #243A64;
position: relative;
}
.container img {
height: 200px;
width: 300px;
overflow: hidden;
}
.container::before {
content: '';
width: 10px;
height: 10px;
border-left: 2px solid #317FE5;
border-top:
推荐阅读
C++ 入门 第 2 节 - 关键字、命名空间、输入和输出
第 13 届 D2 前端技术论坛精彩回顾
JavaScript 前端开发案例教程第 2 章练习
第 1 章 C 语言基础知识 第一节 C 语言的基本认识 1.用 C 语言编写的程序称为源程序，也称为编译单元。2、C语言的书写格式是*的，每行可以写多条语句，可以写多行。3、一个 C 语言程序有且只有一个 ma
Head First HTML and CSS（第 2 版）》中文 pdf 扫描版
前端三剑客--CSS（第 2 节）
数据结构（超详细讲解！！！） 第 XVII 节 队列应用（杨辉三角形） - 2. 分析
C++11 入门手册，第 1 节，学习后直接开始使用 Qt（2 节）
第 2024 节：最新前端技术趋势
TypeScript + React 最佳实践--第 2 节：Redux 类型 (1)