输入标签后文本上的 CSS

Question

如果我有以下 html 代码，如何为“双人床”文本设置 css 样式？

<input type="checkbox" name="room_type_uids[]" value="1" style="line-height: 8;height: 20px;">Double Bed<br />

Answer 1

除非您将文本包装在某个容器元素中，否则您无法设置该文本的样式。可能的场景是..

要么将整个内容包装在一个元素中，比如 div 然后你可以做类似的事情

<div class="wrap">
   <input type="checkbox" name="room_type_uids[]" value="1" style="line-height: 8;height: 20px;">Double Bed<br />
</div>

.wrap {
   color: #f00;
}

或

只需将文本包裹在 span 标签内...

<input type="checkbox" name="room_type_uids[]" value="1" style="line-height: 8;height: 20px;"><span class="wrap_text">Double Bed</span><br />

.wrap_text {
   color: red;
}

---

如果不想给span标签分配一个class，也可以使用相邻的选择器+ like

Demo

input[name="room_type_uids[]"] + span {
    color: red;
}