<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css高级选择器</title>
<style type="text/css">
/*后代选择器 在css中使用非常频繁*/
div p{
color: red;
}
div div p{
color: blue;
}
.container div p{
color: green;
}
/*子代选择器*/
.container>p{
color: blueviolet;
}
/*交集选择器*/
h3{
width: 300px;
color: red;
}
.active{
font-size: 30px;
}
h3.active{
background: darkorange;
}
/*并集选择器(组合选择器)设置多个标签的统一样式*/
h4,a {
color: fuchsia;
font-size: 20px;
text-decoration: none; /*取消默认样式*/
}
/* '*'通配符选择器 性能有点差*/
* {
color: aquamarine;
}
</style>
</head>
<body>
<div class="container">
<p>我是另一个段落</p>
<div>
<p>我是一个段落</p>
<a href="">luffy</a>
</div>
<ul>
<li class="item">
<h3 class="active">我是一个H3</h3>
<h4>我是一个h4标题</h4>
</li>
<li>
<h4>我是一个h4标题</h4>
<a href="#">BAT</a>
</li>
</ul>
</div>
</body>
</html>