猫头鹰选择器
猫头鹰选择器
It may have a strange name but using the universal selector (*) with the adjacent sibling selector (+) can provide a powerful CSS capability;
它的名称可能很奇怪,但是将通用选择器( * )与相邻的兄弟选择器( + )结合使用可以提供强大的CSS功能;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width: 500px;
height: 500px;
border: 1px solid #cccccc;
}
.main div{
border: 1px solid #000000;
height: 80px;
}
.main div + div{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="main">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
</body>
</html> 添加猫头鹰选择器前 .main div + div{ margin-top: 10px; } 样式前
功能:除了第一个元素,其他兄弟元素都要设置该样式。
添加后,除了第一个元素外,其他的兄弟元素的上部边距都设置为 10px;

