css3如何选择有两个div的父级div

<div class="btn">
    <div>11</div>
    <div>22</div>
</div>

.btn如果有两个div子元素就选择生效，如果是1个就不选择不生效，如果做呢，或者scss,less等
总的意思就是如果.btn只有一个子元素，我就对.btn进行设置，否则如果不是只有一个元素，.btn设置不生效或者不设置

css3

阅读 1.9k

3 个回答

得票最新

东郭皮蛋

353

发布于
2022-03-09

可以用伪类 :only-child 选中只有一个 div 的 .btn
https://codepen.io/brendanfic...

破魇

22515

发布于
2022-03-09

<body>
    <div class="box2">
        <div class="btn">
            <div>11</div>
        </div>
    </div>
    <div class="box1">
        <div class="btn">
            <div>11</div>
            <div>22</div>
        </div>
    </div>
    <div class="box3">
        <div class="btn">
            <div>11</div>
            <div>22</div>
            <div>33</div>
        </div>
    </div>

    <script>
        let btn = document.querySelectorAll(".btn")
        for (let i = 0; i < btn.length; i++) {
            const item = btn[i];
            if (item.children.length == 2) {
                console.log(item.parentNode);
            }
        }
    </script>
</body>

打印结果