Question

我正在使用bootstrap multiselect库。我将选项组合在一起，我想为组标题设置样式。 HTML最终结果如下：

<div id="status-dropdown">
    <ul>
        <li>
            <label class="multiselect-group">Group 1</label>
        </li>
        <li class="customDropdownUL">
            <a href="javascript:void(0);">
                <label class="checkbox">
                    <input type="checkbox" value="Option A"> Option A</label>
            </a>
        </li>
        <li>
            <label class="multiselect-group">Group 2</label>
        </li>
        <li class="customDropdownUL">
            <a href="javascript:void(0);">
                <label class="checkbox">
                    <input type="checkbox" value="Option B">Option B</label>
            </a>
        </li>
        <li class="customDropdownUL">
            <a href="javascript:void(0);">
                <label class="checkbox">
                    <input type="checkbox" value="Option C"> Option C</label>
            </a>
        </li>
    </ul>
</div>

我的CSS是：

li{
    list-style-type: none;
}  

#status-dropdown li:has(> label.multiselect-group) {
    background: none repeat scroll 0 0 whitesmoke;
    padding-left: 10px; 
}

因此，如果li的{{1}}类为label，则为其提供背景和填充。但是，这不起作用。请参阅jsfiddle here。

注意：我不能简单地在li上放一个类，因为我需要修改库来做到这一点。

如何根据孩子的类来定位父元素？

Answer 1

您似乎正在尝试使用Selectors 4中的:has()伪类。虽然您正确使用它，但此功能尚未实施，因此无法在任何地方使用。

目前没有基于CSS的替代方案。有关更新和解决方法，请参阅Is there a CSS parent selector?。

根据孩子的类别定位父元素

1 个答案: