css - SASS:选择最接近的

Question

我有以下 HTML:

<div class="row">

    <div class="col">
        <div class="wrapper">
            <input type="radio" value="value-0" />
        </div>
    </div>

    <div class="col">
        <div class="wrapper">
            <input type="radio" value="value-1" checked="checked" >
        </div>
    </div>

</div>

在 SASS 中有没有办法选择 .col，最接近选中的单选按钮？

Answer 1

Unfortunately no ，您不能根据任何子元素的存在来选择元素。

您的问题的解决方案是使用 JavaScript。您可以选择所有单选按钮，向上遍历 DOM 树以找到父 .col 元素(例如，如果您使用的是 jQuery，则使用 jQuery 的 .closest() 函数，然后添加一个新类到那些 col 元素。

例如(如果您使用的是 jQuery)

$(".col > input[type=radio]").closest(".col").addClass("col-with-radio")

...然后您可以设置 .col-with-radio 类的样式。