css - 当标签内的输入字段处于事件状态时如何保持标签处于事件状态？

Question

我有像 <label>name:<input></label> 这样的标签 和CSS之类的 label:active{/*properties*/} 我希望将属性应用于 name里面<label>当我点击 <input>它得到了应用，但它失去了对 <input> 的关注单击它后不久。

这是一个例子:http://jsfiddle.net/GuCk4/2/

Answer 1

如果我理解您的问题，您可以这样做...而无需更改任何 HTML。

label, input, input:focus{
    font-weight: bold;
}

示例:http://jsfiddle.net/jasongennaro/GuCk4/4/

顺便说一句:你真的不需要 input:focus 在这里……至少在我对 Chrome 的测试中是这样。对于其他浏览器，您可能需要它。

编辑

好的，在@Mohsen 的评论之后，我重新阅读了这个问题。

您想要的是 css 中的父选择器。这不存在。由于 css 依赖于级联，因此它会将样式应用到 DOM 的下方而不是向上。

所以，按照@Mohsen 的回答，做你想做的唯一方法是重写你的 HTML，或者像这样使用一些 jQuery

$('input').focus(function(){
    $(this).parent().css('font-weight','bold');
});

$('input').blur(function(){
    $(this).parent().css('font-weight','normal');
});

示例 2: http://jsfiddle.net/jasongennaro/GuCk4/5/