Question

我有两组单选按钮，我希望它们的样式不同。一个在表中，另一个在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

如果代码具有相同的特异性，则出现在代码后面的规则将覆盖以前的规则。

我想您稍后在CSS文件中定义了td.lblcontainer input[type="radio"]。放在上方，或代替

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

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

请注意，>选择器仅针对一级孩子，因此不会影响input内部的div。

Answer 2

.lblcontainer input {
  /* Style all inputs inside .lblcontainer, if you have any shared styles */
}

.lblcontainer > input {
  /* Style inputs that are direct children of .lblcontainer */
}

.calChooser input {
  /* Style inputs that are children of .calChooser */
}

Answer 3

在div.calChooser中使用！important属性

.calChooser input[type="radio"]{
property : value!important;
}

CSS选择器发生冲突

3 个答案: