Html-高级选择器及优先级
CSS高级选择器
1.后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*用空格连接，body下的h1标签都用这个样式*/
body .h1{
color: red;
}
</style>
</head>
<body>
<div>
<h1 class="h1">div下的一级标题</h1> <!--color：red-->
</div>
<h1 class="h1">body下的一级标题</h1> <!--color：red-->
</body>
</html>
2.子代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
/*用 > 连接，紧接着body下的h1标签用这个样式，*/
body > .h1{
color: red;
}
</style>
</head>
<body>
<div>
<h1 class="h1">div下的一级标题</h1>
</div>
<h1 class="h1">body下的一级标题</h1> <!--color：red-->
</body>
</html>
3.兄弟标签
同一结构下的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兄弟标签</title>
<style>
/*用~连接，表示与h1在同一结构下的h2*/
.h1 ~ .h2{
color:pink;
}
</style>
</head>
<body>
<div>
<h1 class="h1">div下的第1个一级标题</h1>
<h2 class="h2">div下的第2个一级标题</h2> <!--color:pink-->
<h2 class="h2">div下的第3个一级标题</h2> <!--color:pink-->
</div>
</body>
</html>
4.相邻标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相邻标签</title>
<style>
/*用+连接，表示给与h1下相邻的h2设置样式*/
.h1 + .h2{
color:pink;
}
</style>
</head>
<body>
<div>
<h1 class="h1">div下的第1个一级标题</h1>
<h2 class="h2">div下的第2个一级标题</h2> <!--color:pink-->
<h2 class="h2">div下的第3个一级标题</h2>
</div>
</body>
</html>
5.群组选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
/*给多个选择器设置相同的样式时使用*/
.h1,.h3,.h2{
color:orange;
text-align:center;
}
</style>
</head>
<body>
<div>
<h1 class="h1">div下的第1个一级标题</h1>
<h2 class="h2">div下的第2个一级标题</h2>
</div>
<h3 class="h3">h3下的标题</h3>
<p>段落标签</p>
</body>
</html>
6.交叉选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>交叉选择器</title>
<style>
h2#h2h2.h2.hh{
color:red;
}
</style>
</head>
<body>
<div>
<h1 class="h1">div下的第1个一级标题</h1>
<h2 id="h2h2" class="h2 hh">div下的第2个一级标题</h2>
</div>
<h3 class="h3">h3下的标题</h3>
<p>段落标签</p>
</body>
</html>
选择器优先级
**选择器级别：!important > id > class >标签 > 统配 **
- 不同级别之间没有可比性
- 同一级别比个数
- 选择器类型不影响优先级
- 优先级一致时看顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
#haha{
color:brown;
text-align: center;
}
.h2{
color:green;
text-align: center;
}
div .h2{
color:red;
text-align: center;
}
.h1 + .h2 {
color: grey;
text-align: center;
}
h2{
color:orange;
text-align: center;
}
</style>
</head>
<body>
<h1 class="h1">body下的第1个一级标题</h1>
<div>
<h1 class="h1">div下的第1个一级标题</h1>
<h2 id="haha" class="h2">div下的第1个一级标题</h2>
</div>
</body>
</html>
