猫头鹰选择器

猫头鹰选择器

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;

图片说明

全部评论

相关推荐

12-19 20:28
已编辑
门头沟学院 Java
美团履约 全栈工程师 (n+1)*15.5 其他
点赞 评论 收藏
分享
在写周报的打工人很独...:这个笔试昨天晚上做了一下,真难啊,前后端,ai全有
点赞 评论 收藏
分享
10-29 18:20
济南大学 Java
用微笑面对困难:他不是人事吗,怎么净特么不干人事
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务