奇怪的CSS显示问题

Question

我正在使用jquery管理<a>的元素显示。根据一些按键事件，它会附加或删除与所提及的<input>具有兄弟关系的display类（负责<a>管理）。

问题是，我有一个使用CSS +的选择器。由于某些原因，在Chrome中（我不确定其他浏览器，因为我没有测试过），当兄弟display:block拥有类时，它不会<a> <a>元素。< / p>

HTML

<div class="cont">
    <input class="myInput"/>
    <label>S</label>
    <a>X</a>
</div>

CSS

.cont {
    position: relative;
}
a {
    position: absolute;    
    left: 117px;
    top: 3px;
    display: none;
}
label {
    position: absolute;
    left: 140px;
    top: 3px;
}
.has_typed + label + a {
    display: block;
}

脚本

$("input").on('keyup', function(){
    var thiss = $(this);
    if (thiss.val() != 0 && !(thiss.hasClass('has_typed'))) {
        thiss.addClass('has_typed');
    }
    else if (thiss.val() == 0) {
        thiss.removeClass('has_typed');
    }
});

小提琴： http://jsfiddle.net/aF4qt/1/

Answer 1

变化：

.has_typed + label + a { ... }

要：

.has_typed ~ label + a { ... }

http://jsfiddle.net/JamesD/aF4qt/7/

Answer 2

如果你在jQuery中做所有事情，那么为什么不使用jQuery本身做其余的事情。

试试这个：

$('.has_typed + label + a').show();

不确定为什么同样不能用于css

Working Fiddle

如果你有多个小组，这也会有效。

选中此fiddle

检查此 link 以获取更多信息。