如何更改复选框的颜色而不更改整个班级的颜色？

Question

我需要更改复选框标签的样式。

这是我的html：

<div class="ui-checkbox">
  <input id="keepMeInformed" type="checkbox" data-theme="d" onchange="fixCheckboxesValues();" checked="checked" value="1" name="optedIn">
    <label class="optional ui-btn ui-btn-icon-left ui-btn-corner-all ui-btn-up-d ui-checkbox-off" for="keepMeInformed" data-theme="d">
      <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
         <span class="ui-btn-text">Label text</span>
         <span class="ui-icon ui-icon-shadow ui-icon-checkbox-off"></span>
       </span>
    </label>
</div>

我需要将文本设为红色，但如果我更改 .ui-btn-text 类样式，页面的所有按钮都会变为红色文本样式。

.ui-btn-text{
    color:red;
}

有没有办法只改变复选框中标签的颜色？

编辑：

感谢大家，我解决了添加一个包装 CheckBox 并编写 jQuery 的 div 的问题：

function changeCheckBoxStyle() { 
   $('#checkBoxWrapper').find('[class=ui-btn-text]').css('color','red');
 }

但我认为 scott 的解决方案也可以 :) 谢谢

Answer 1

假设您正确使用了 ID（页面独有），那么这应该可以：

#keepMeInformed + label .ui-btn-text {
    color: red;
}

它查找唯一的input 元素keepMeInformed，然后找到它旁边的兄弟label 元素，并将样式仅应用于该标签的.ui-btn-text 类元素。