层级选择器：selector1 selector2
用于嵌套关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
<!--box1容器里边的所有p标签变红色-->
.box1 p{
color: red;
}
</style>
</head>
<body>
<div class="box1">
<h1>hello world1</h1>
<p>hello world1.1</p>
</div>
<div class="box2">
<h1>hello world2</h1>
</div>
</body>
</html>
组合选择器：selector1,selector2
同时设置多个选择器的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
<!--所有的h1h2变红色-->
h1,h2{
color: red;
}
</style>
</head>
<body>
<div class="box1">
<h1>hello world1.1</h1>
<h2>hello world1.2</h2>
</div>
<div class="box2">
<h1>hello h2.1</h1>
</div>
</body>
</html>
搭配用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.box1 h1,.box1 h2{
/*这里是两个层级选择器构成的组合选择器*/
color: red;
}
</style>
</head>
<body>
<div class="box1">
<h1>hello world1.1</h1>
<h2>hello world1.2</h2>
</div>
<div class="box2">
<h1>hello h2.1</h1>
</div>
</body>
</html>
伪类选择器：selector:hover
伪类选择器用于增加行为，例如鼠标移动到一个按钮上面，按钮就会变成绿色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.btn:hover{
background-color: green;
}
</style>
</head>
<body>
<input class="btn" type="button" value="按钮">
</body>
</html>
移动前后对比
伪元素选择器
用于添加新的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.test::before{
content:"----"/*content是要加的内容*/
}
.test::after{
content:"----"
}
</style>
</head>
<body>
<h1 class="test">hello world</h1>
<h2 class="test">hello title</h2>
</body>
</html>
- 稍微用组合选择器改进下
.test::before,.test::after{
content:"----"
}
选择器权重（优先级）
- 相同权重的选择器：后面的会覆盖前面的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.a{
color: red;
}
.b{
color: blue;
}
/*选择器都能定位到同一个标签h1，都是类选择器所以权重相同，后面覆盖前面的代码*/
</style>
</head>
<body>
<h1 class="a b">hello</h1>
</body>
</html>
- 不同选择器：id(100)>class(10)>element(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.mode2{
color: red;
}
#mode1{
color: blue;
}
/*id选择器比类选择器权重高，所以执行id选择器的语句*/
</style>
</head>
<body>
<h1 id="mode1" class="mode2">hello</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.mode2{
color: red;
}
h1{
color: blue;
}
/*类选择器权重比元素高，优先执行类选择器*/
</style>
</head>
<body>
<h1 class="mode2">hello</h1>
</body>
</html>
- 层级选择器：按权重累加计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.box1 h1{
color: red;
}
#box2 h1{
color: blue;
}
/*层级选择器由多个选择器组成，优先级由权重之和比较决定*/
/*.box权重为10，h1权重为1，所以.box1 h1权重和=11*/
/*#box权重为100，h1权重为1，所以.box1 h1权重和=101*/
/*所以hello为蓝色*/
</style>
</head>
<body>
<div class="box1" id="box2">
<h1 class="box3" id="box4">hello</h1>
</div>
</body>
</html>
如果改成这样，权重上面的更高，hello为红色
.box1 #box4{
color: red;
}
#box2 h1{
color: blue;
}
设置最高权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.box1 #box4{
color: red;
}
#box2 h1{
color: blue;
}
h1{
color: green !important;/*尽管权重最低，但有!important就会变成最高权重，优先执行*/
}
</style>
</head>
<body>
<div class="box1" id="box2">
<h1 class="box3" id="box4">hello</h1>
</div>
</body>
</html>
CSS的引入方法
- 嵌入方式
写在里 - 内联方式
写在html具体语句中 - 外部方式
css文件
权重：内联>嵌入
实际开发更多用外部方式，尽量不用内联方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<!--嵌入样式-->
<style>
h1{
font-size: 16px;
}
</style>
<!--外部方式-->
<link rel="stylesheet" href="democ.css">
</head>
<body>
<!--内联样式-->
<h1 style="color: white">hello world</h1>
</body>
</html>
