「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」
CSS：层叠样式表（Cascading style sheets）
为HTML标签设置样式
一、CSS引入方式
CSS有三种引入方式：
- 内嵌式：CSS写在style标签中
- 外联式：CSS写在一个单独的.css文件中，通过link标签引入
- 行内式：CSS写在标签的style属性中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内嵌式 -->
<style>
p {
color: red;
}
</style>
<!-- 外联式 -->
<link rel="stylesheet" href="./02.css">
</head>
<body>
<p>我是一个p标签</p>
<!-- 行内式 -->
<p style="color: green;">我也是一个p标签</p>
</body>
</html>
二、基础选择器
三、选择器进阶
3-1、复合选择器
3-1-1、后代选择器
M N：会选中M元素内部所有的后代N元素，不管M中的N元素被嵌套多深
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
#first p{
background-color: slategrey;
}
</style>
</head>
<body>
<div id="first">
<p>123</p>
<p>123</p>
<div id="second">
<p>123</p>
<p>123</p>
</div>
<p>123</p>
<p>123</p>
</div>
</body>
</html>
效果：
3-1-2、子代选择器
M>N：选择M元素内部的子代N元素，只会选中其直接子代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
#first > p{
background-color: sandybrown;
}
</style>
</head>
<body>
<div id="first">
<p>123</p>
<p>123</p>
<div id="second">
<p>123</p>
<p>123</p>
</div>
<p>123</p>
<p>123</p>
</div>
</body>
</html>
效果：
3-1-3、兄弟选择器
M~N：兄弟选择器，选择M元素后所有的同级N元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
#second~p {
background-color: springgreen;
}
</style>
</head>
<body>
<div id="first">
<p>123</p>
<p>123</p>
<div id="second">
<p>123</p>
<p>123</p>
</div>
<p>123</p>
<p>123</p>
</div>
</body>
</html>
效果：
3-1-4、相邻选择器
M+N：相邻选择器，选择M元素相邻的下一个同级N元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
ul {
width: 300px;
list-style-type: none;
}
/*
这是一个非常棒的技巧，
在实际开发中如果想要在两两元素之间实现border、margin的效果，会经常用到*/
li+li {
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
效果：
！实用技巧：通常用相邻选择器来实现为两两元素之间添加border、margin的效果
3-2、并集选择器
M, N：同时选中M和N
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
.p1, .p2 {
background-color: cyan;
}
</style>
</head>
<body>
<div class="demo" id="first">
<p class="p1">123</p>
<p>123</p>
<div id="second">
<p class="p2">123</p>
<p>123</p>
</div>
<p>123</p>
<p>123</p>
</div>
</body>
</html>
效果：
3-3、交集选择器
MN：既是M又是N的标签，如果MN之间有标签选择器，要写在前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
p.demo {
color:chocolate;
}
</style>
</head>
<body>
<div class="demo" id="first">
<p>123</p>
<p>123</p>
<div id="second">
<p class="demo">123</p>
<p>123</p>
</div>
<p>123</p>
<p>123</p>
</div>
</body>
</html>
效果：
3-4、hover伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
}
a:hover {
color: orange;
text-decoration: underline;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
.box:hover {
width: 400px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<a href="#">我是一个a标签</a>
<div class="box"></div>
</body>
</html>
效果：
3-5、结构伪类选择器
3-5-1、选择器说明
| 选择器 | 说明 |
|---|---|
| E:first-child {} | 匹配父元素中第一个子元素，并且是E元素，兼容IE7 |
| E:last-child {} | 匹配父元素中最后一个子元素，并且是E元素, 兼容IE9 |
| E:nth-child(n) {} | 匹配父元素中第n个子元素，并且是E元素, 兼容IE9 |
| E:nth-last-child(n) {} | 匹配父元素中倒数第n个子元素，并且是E元素, 兼容IE9 |
| E:nth-of-type(n) {} | 只在父元素的同类型（E）子元素范围中，匹配第n个, 兼容IE9 |
- :nth-child 时直接在所有父元素的子元素中数个数
- :nth-of-type 先通过该类型找到符合的一堆子元素，再在其中数个数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1、找到第一个子元素，并且为li标签 */
li:first-child {
/* background-color: blue; */
}
/* 2、找到最后一个子元素，并且为li标签 */
li:last-child {
/* background-color: orange; */
}
/* 3、找到第3个子元素，并且为li标签 */
li:nth-child(3) {
/* background-color: pink; */
}
/* 4、找到倒数第3个子元素，并且为li标签 */
li:nth-last-child(3) {
background-color: red;
}
</style>
</head>
<body>
<!-- ul>li{我是第$个li}*10 -->
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
</body>
</html>
3-5-2、关于n
通过n可以组成常见公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1、odd |
| 找到前5个 | -n+5（包含第5个） |
| 找到从第5个往后 | n+5（包含第5个） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1、找到偶数个li------------------------ */
li:nth-child(2n) {
/* background-color: orange; */
}
li:nth-child(even) {
/* background-color: blue; */
}
/* 2、找到奇数个li------------------------ */
li:nth-child(2n+1) {
/* background-color: orange; */
}
li:nth-child(2n-1) {
/* background-color: blue; */
}
li:nth-child(odd) {
/* background-color: pink; */
}
/* 3、找到前5个,包括第5个------------------------ */
li:nth-child(-n+5) {
/* background-color: orange; */
}
/* 4、找到从第5个往后，包括第5个------------------------ */
li:nth-child(n+5) {
background-color: red;
}
</style>
</head>
<body>
<!-- ul>li{我是第$个li}*10 -->
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
</body>
</html>
3-5-3、结构伪类选择器易错点
比如：要找到第一个li元素下的a标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 错误的写法 */
/* 找到li下的第一个a标签，此时所有的a标签中的文字都会变为橙色 */
li a:first-child {
/* color: orange; */
}
/* 正确的写法 */
/* 找到第一个li下的a标签 */
li:first-child a {
color: green;
}
</style>
</head>
<body>
<ul>
<li><a href="#">我是第1个a标签</a></li>
<li><a href="#">我是第2个a标签</a></li>
<li><a href="#">我是第3个a标签</a></li>
<li><a href="#">我是第4个a标签</a></li>
<li><a href="#">我是第5个a标签</a></li>
<li><a href="#">我是第6个a标签</a></li>
<li><a href="#">我是第7个a标签</a></li>
<li><a href="#">我是第8个a标签</a></li>
</ul>
</body>
</html>
3-5-4、nth-of-type的正确用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 需求：需要找到第3个li标签 */
/* 1、使用 :nth-child */
li:nth-child(8) {
/* background-color: green; */
}
/* 2、使用 :nth-of-type */
li:nth-of-type(3) {
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
</body>
</html>
3-6、链接伪类选择器
| 选择器语法 | 功能 |
|---|---|
| a:link {} | 选中a链接未访问过的状态 |
| a:visited {} | 选中a链接访问之后的状态 |
| a:hover {} | 选中鼠标悬停的状态 |
| a:active {} | 选中鼠标按下的状态 |
- 如果要同时实现以上四种伪类状态效果，需要按照LVHA顺序书写（“爱恨”准则： LOVE HATE）
- a:link与a:visited谁在谁前无所谓
- 如果设置了a:link与a:visited但在未点击链接前展示的是a:visited的样式，是因为浏览器会记录点击过的链接，此时可尝试清除一下浏览器缓存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选中a标签未访问过的状态 */
a:link {
color: red;
}
/* 选中a标签访问过之后的状态 */
a:visited {
color: yellow;
}
/* 选中鼠标悬停的状态 */
a:hover {
color: orange;
}
/* 选中鼠标按下的状态 */
a:active {
color: skyblue;
}
</style>
</head>
<body>
<a href="#">我是a标签</a>
</body>
</html>
3-7、CSS3新增伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.para {
width: 100px;
height: 100px;
border: 1px solid #000;
}
/*注意！标签内有空格或换行不会被看作是空标签*/
.para:empty {
background-color: red;
}
input:focus {
background-color: rgb(239, 243, 181);
}
input:disabled {
border: 1px solid #000;
}
input:enabled {
border: 1px solid rgb(17, 84, 209);
}
input:checked+span {
color: red;
}
:root {
font-size: 20px;
}
/*选中被锚点链接下的h3标签*/
:target h3 {
color: yellow;
}
/*选中id为list下的除了类名为first的所有li*/
#list li:not(.first) {
color: antiquewhite;
}
</style>
</head>
<body>
<p class="para"></p>
<p class="para"></p>
<p class="para">123</p>
<p class="para"> </p>
<p>
<input type="text">
<input type="text">
<input type="text" disabled>
<input type="text" disabled>
<input type="text">
</p>
<p>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<input type="checkbox" checked> <span>文字</span>
<input type="checkbox"> <span>文字</span>
</p>
<div>
<a href="#music">推荐音乐</a>
<a href="#movie">推荐电影</a>
</div>
......<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>音乐1</li>
<li>音乐2</li>
<li>音乐3</li>
</ul>
</div>
......<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>电影1</li>
<li>电影2</li>
<li>电影3</li>
</ul>
</div>
<ul id="list">
<li class="first">列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</body>
</html>
3-8、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 找到页面中的input，并且需要有type属性 */
input[type] {
/* background-color: pink; */
}
/* 找到页面中的input，并且需要type属性值为text */
input[type="text"] {
background-color: red;
}
input[type="password"] {
background-color: green;
}
/*选中attr属性值中的val是以空格隔开的独立部分的input*/
input[attr~="val"] {
background-color: orange;
}
/*选中attr属性值是以“val-”开头的input*/
input[attr|="val"] {
background-color: skyblue;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
<input type="text" attr="abc val">
<input type="text" attr="val-abc">
</body>
</html>
