Html CSS选择器冲突

我有两套单选按钮，我想风格不同。一个在表中，另一个在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>

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

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

---

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

使用！div.calChooser like中的重要属性

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

---

使用！div.calChooser like中的重要属性

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

如果两个规则具有相同的特定性，则代码中后面出现的规则将覆盖前面的规则

我假定您的CSS文件中稍后定义了

td.lblcontainer输入[type=“radio”]

。要么把它放在上面，要么改为做

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

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

注意

选择器只针对第一级子级，因此不会影响

div中的
输入

.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 */
}

如果两个规则具有相同的特定性，则代码中后面出现的规则将覆盖前面的规则

我假定您的CSS文件中稍后定义了
td.lblcontainer输入[type=“radio”]
。要么把它放在上面，要么改为做

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

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

请注意，
选择器仅针对一级子项，因此不会影响
div中的
输入
在CSD中的div之前添加“.lblcontainer”。特殊性似乎相同，因此应优先考虑最后一条规则。你能发布一个我们可以看到的实际问题吗？你可能想考虑使用<代码> <代码>组合器而不是<代码>。␣
td.lblcontainer>input[type=radio]
只会影响一级子级，因此不会影响CSD中div之前的
.add“.lblcontainer”中的子级。特殊性似乎相同，因此应以最后一条规则为准。你能发布一个我们可以看到的实际问题吗？你可能想考虑使用<代码> <代码>组合器而不是<代码>。␣
td.lblcontainer>input[type=radio]
只会影响一级子级，因此不会影响
中的子级。使用！重要的是一个坏习惯，不要使用！重要的是，因为覆盖这一点将需要未来更具体的方式。只使用！这对于在浏览器中测试某些内容很重要，或者在非常罕见的情况下是绝对必要的。在这种情况下，它是不需要的。使用！重要的是一个坏习惯，不要使用！重要的是，因为覆盖这一点将需要未来更具体的方式。只使用！这对于在浏览器中测试某些内容很重要，或者在非常罕见的情况下是绝对必要的。在这种情况下，它是不需要的。
.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 */
}