组合选择器
Posted surewing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组合选择器相关的知识，希望对你有一定的参考价值。
标签（空格分隔）： 高级选择器
高级选择器
后代选择器
因为html元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式：
div p {
color: red;
}从div的所有后代中找p标签，设置字体颜色为红色。
儿子选择器
div>p {
color: red;
}从div的直接子元素中找到p标签，设置字体颜色为红色。
毗邻选择器
div+p {
color: red;
}弟弟选择器
div~p {
color: red;
}找到所有div标签后面同级的p标签，设置字体颜色为红色。
例如：如下案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style type="text/css">
/*div p{*/
/*color :red;*/
/*}*/
/*div div p{*/
/*color :yellowgreen;*/
/*}*/
/*.container div p{*/
/*color:green;*/
/*}*/
.container >p{
color:greenyellow;
}
h3{
color:red;
width:300px;
}
/*交集选择器*/
h3.active{
color:yellowgreen;
}
/*并集选择器,并集选择器组合，同一设置标签的统一样式*/
a,h4{
color:#666;
font-size: 20px;
text-decoration: none;
}
/* *表示所有的标签，但是性能会稍微差点*/
*{
}
</style>
<!--后代选择器,在css中是用频繁-->
</head>
<body>
<div class="container">
<p>我是另一个段落</p>
<div>
<p>我是一个段落</p>
<a href="#">lllllll</a>
</div>
<p>我是2段落</p>
<ul>
<li class="item">
<h3 class="active">我是一个和h3</h3>
</li>
<li>
<h4>我是H4</h4>
<a href="#">BAT</a>
</li>
</ul>
</div>
</body>
</html>以上是关于组合选择器的主要内容，如果未能解决你的问题，请参考以下文章