html - 如何在不为整个类(class)更改复选框的情况下更改复选框的颜色？

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 的 div 并编写了 jQuery:

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 仅限类元素。