高级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高级选择器</title>
<style>
.h2 {
color: red;
}
/*1、后代(子代)选择器*/
/*后代：空格连接 子代：>连接*/
/*body > .h2 控制一个 | body .h2 控制两个*/
body > .h2 {
font-size: 40px;
}
/*2、兄弟(相邻)标签：只能上兄弟修饰下兄弟*/
/*兄弟：~连接 相邻：+连接*/
/*.h3 + .h4 控制一个 | .h3 ~ .h4 控制两个*/
.h3 + .h4 {
color: pink;
}
/*3、群组选择器：控制多个选择器*/
.h2, body h3, h4 {
text-align: center;
}
/*4、选择器的优先级：权重 - 个数*/
/*权值：不同级别没有可比性、同一级别比个数、选择器类型不影响优先级、优先级一致看顺序
*：1
标签：10
class(伪类)：100
id：1000
!important：10000
*/
#h6 {
color: black;
}
.d1 div h6 {
color: pink;
}
.d2 h6 {
color: brown;
}
body h6 {
color: cyan;
}
div > h6 {
color: orange;
}
h6 {
font-size: 100px;
text-align: center;
color: red;
}
</style>
<style>
/*5、交叉选择器*/
h6#h6.h.hh {
color: chartreuse;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<h6 id="h6" class="h hh">css高级选择器优先级</h6>
</div>
</div>
<h3 class="h3">第1个h3</h3>
<h4 class="h4">第1个h4</h4>
<h4 class="h4">第2个h4</h4>
<h3 class="h3">第1个h3</h3>
<div>
<h4 class="h4">第1个h4</h4>
<h4 class="h4">第2个h4</h4>
</div>
<h2 class="h2">h2标签</h2>
<div>
<h2 class="h2">div下的h2</h2>
</div>
<p>p标签的内容不水平居中</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta
