CSS 选择器冲突

Question

我有两组单选按钮，我想设置不同的样式。一个在表中，另一个在 div 中。父级在表中，子级在 div 中。

所以它看起来像这样

<td class="lblcontainer">
    <input type"radio" name="advSearch[puborpost]" value="Published">
    <input type"radio" name="advSearch[puborpost]" value="Posted">
    <div class="calChooser">
        <input type"radio" name="cal[puborpost]" value="24 Hours">
        <input type"radio" name="cal[puborpost]" value="1 Week">
    </div>
</td>

我的 css 看起来像这样

td.lblcontainer input[type="radio"]{
*css values*
}
div.calChooser input[type="radio"]{
*css values*
}

当我打开我的开发工具时，td.lblcontainer 被应用到 div.calChooser 中，用于我的 div 中的所有单选按钮。

我缺少什么可以防止 div.calChooser 中的单选按钮冒泡并采用 td.lblcontainer 的样式？

Answer 1

如果两者具有相同的特性，则代码中稍后出现的规则会覆盖较早的规则。

我想你td.lblcontainer input[type="radio"]后来在你的 CSS 文件中定义了。要么把它放在上面，要么做

td.lblcontainer > input[type="radio"]{
*css values*
}

div.calChooser input[type="radio"]{
*css values*
}

注意>选择只针对第一级的孩子，因此不会影响到 input你的内部div。