<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器 在CSS中使用比较频繁*/
div p {
color:red;
}
div div p {
color:green;
}
.content div p {
color:gray;
}
/*子代选择器*/
.content>p{
color:yellowgreen;
}
/*交集选择器 对共有的部分设置属性*/
h3 {
300px;
color:red;
}
.active {
font-size:30px;
}
h3.active {
background-color: yellow;
}
/*组合选择器/并集选择器 设置多个标签统一样式*/
a, h4 {
color:#666;
font-size:20px;
/*去掉a标签的下划线*/
text-decoration:none;
}
/*通配符选择器* 性能比较差，一般不用，设置多个标签统一样式*/
* {
}
</style>
</head>
<body>
<div class="content">
<p>高级选择器</p>
<div>
<p>高级选择器</p>
<a href="">ali</a>
</div>
<p>另外一个高级选择器</p>
</div>
<ul>
<li class="item">
<h3 class="active">我是一个H3</h3>
<h4>我是一个h4标签</h4>
</li>
<li>
<h4>我是一个h4标签</h4>
<a href="">BAT</a>
</li>
</ul>
</body>
</html>