1. 百度中搜索结果:
这些是CSS3特有的选择器,E > F 表示选择E元素的所有子F元素,与E F的区别在于,E F选择所有后代元素,>只选择一代。
2. 例子:
<html>
<head>
<style>
.level1{
background-color: #eeeeee;
}
.level1 > a {
position: relative;
display: block;
padding: 10px 15px;
}
.level3 {
background-color: #dddddd;
}
.level3 a {
position: relative;
display: block;
padding: 10px 15px;
}
</style>
</head>
<body>
<div class='level1'>
<a>A</a>
<a>B</a>
<a>C</a>
<div class='level2'>
<a>D</a>
<a>E</a>
<a>F</a>
</div>
</div>
<div class='level3'>
<a>A</a>
<a>B</a>
<a>C</a>
<div class='level4'>
<a>D</a>
<a>E</a>
<a>F</a>
</div>
</div>
</body>
</html>
3. 运行结果