html - CSS sibling ，首先

Question

我们使用带有以下 CSS 的打包主题:

.rdio input[type="radio"]:disabled + label  {
     color: #999;
 }
 <div class=rdio> 
    <input type=checkbox>
     <label....>
 <div>

如您所见，它仅在标签直接是复选框的同级时应用。

我们不能修改 CSS，我必须写一个 Custom.css 在主主题 css 之后加载。

我可以添加什么新的、额外的 CSS 来实现这一点(第一个标签兄弟，但不是直接的)

 <div class=rdio> 
   <input type=checkbox>
   <one element of anything>
   <label....>
</div> 

我正在寻找我可以做的覆盖，因为我无法编辑原始 css。

Answer 1

有两个选项，很明显:

.rdio input[type="radio"]:disabled + * + label

以及一般兄弟组合器(~)的(稍微)不太明显的使用:

.rdio input[type="radio"]:disabled ~ label

如果您真的必须像您的问题所暗示的那样只定位 input 之后的 first label 元素:

.rdio input[type="radio"]:disabled ~ label {
    /* style the labels */
}

.rdio input[type="radio"]:disabled ~ label ~ label {
    /* override subsequent label element styling */
}