1.选择器
1.1 复合选择器
1.1.1 后代选择器
注意：后代选择器执行代码的时候，先执行孩子，后执行父亲；即先找到li后找到ul
<!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>
/* 使用复合选择器只将有序列表的li改为红色 */
ol li {
height: 50px;
background-color: aqua;
}
/* 只将第二组的li变色 */
.first li {
color: red;
}
/* div p span {
color: green;
} */
/* 也可以简化为 */
div span {
color: green;
}
</style>
</head>
<body>
<ul class="first">
<li>我是无序列表1</li>
<li>我是无序列表2</li>
<li>我是无序列表3</li>
<li>我是无序列表4</li>
</ul>
<ul class="secend">
<li>我是无序列表5</li>
<li>我是无序列表6</li>
<li>我是无序列表7</li>
<li>我是无序列表8</li>
</ul>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
<li>我是有序列表4</li>
</ol>
<div>
<p>
<span>
我是span
</span>
</p>
</div>
</body>
</html>
结果:
1.1.2 子代选择器
<!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>
/* 子代选择器 */
div>span {
color: pink;
}
</style>
</head>
<body>
<div>
<span>我是儿子</span>
<p>
<span>我是孙子</span>
</p>
</div>
</body>
</html>
结果：
1.1.3 并级选择器
<!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>
/* 并级选择器 */
div,
span,
p {
color: pink;
}
</style>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<p>我是段落</p>
</body>
</html>
结果：
1.1.4 交集选择器
<!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>
/* 交集选择器 */
/* 标签.类名 既是某个标签，又包含某个类名 */
div.red {
color: aquamarine;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<div>我是没有class的div</div>
<p class="red">我是段落</p>
</body>
</html>
1.1.5 伪类选择器
1.1.5.1
<!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 {
color: black;
text-decoration: none;
}
/* 标签名：hover 鼠标经过这个标签的时候，状态会变成什么样式 */
/* 意思是鼠标经过a的时候，就会变成红色加下划线 */
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
</body>
</html>
结果：
1.1.5.2 链接伪类（了解）
注意：顺序不能颠倒
2 层叠性
2.1 初步介绍
相同的属性会重叠 一般选取最后一个样式 (后者覆盖前面的)
<!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>
div {
color: aqua;
}
div {
color: blue;
}
</style>
</head>
<body>
<div>
我是文字
</div>
</body>
</html>
2.2 优先级
<!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>
* {
color: red;
}
div {
color: blue;
}
.blue {
color: green;
}
#pink {
color: pink;
}
</style>
</head>
<body>
<div class='blue' id="pink" style="color: blueviolet">我是文字</div>
</body>
</html>
2.3 优先级叠加
<!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>
/* 优先级（权重叠加） */
/* 权重为1 */
li {
color: red;
}
/* ul权重为1 li权重为1 1+1=2 所以会优先执行ul li */
ul li {
color: blue;
}
/* li为 1 。blue为10（类选择器）1+10=11*/
li.pink {
color: pink;
}
/* 10+1+1+1=13 */
.nav ul li a {
color: red;
}
</style>
</head>
<body>
<ul>
<li class="pink">我是文字</li>
</ul>
<div class="nav">
<ul>
<li><a href="#">电器</a></li>
</ul>
</div>
</body>
</html>
2.4 继承的优先级为0
<!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>
li {
color: red;
}
.box {
color: antiquewhite;
}
</style>
</head>
<body>
<ul class="box">
<li>我是文字</li>
</ul>
</body>
</html>
3 Emmet写法
4 背景
5 显示模式
5.1 块级元素
<'div></div'>' <'p></p'>
5.2 行内元素
<'span></'span> <'em></em'> <strong'></strong'> <'a></a'> <'b></b'> <'i></i'>
5.3 行内块元素
<'img></'img> <'input></input'> <td'></td'>
5.4 转换显示模式
<!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 {
/* 转化为块级元素 */
display: block;
width: 100px;
height: 30px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#">手机</a>
</body>
</html>
