猫头鹰选择器

猫头鹰选择器

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;

图片说明

全部评论

相关推荐

头像
不愿透露姓名的神秘牛友
03-13 10:56
点赞 评论 收藏
转发
点赞 收藏 评论
分享
牛客网
牛客企业服务