奇怪的CSS显示问题

Question

I'm managing a <a> 's element display with jquery. Based on some keypress events, it appends or removes an <input> 's class (responsible with display management) that has a sibling relationship with the mentioned <a> .

The problem is that, i have a selector that uses CSS + . And for some reason, in Chrome (im not sure about other browsers since i have not tested), it won't display:block the <a> element when the sibling <a> has the class.

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;
}

Script

$("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');
    }
});

Fiddle here: http://jsfiddle.net/aF4qt/1/

Answer 1

Change:

.has_typed + label + a { ... }

To:

.has_typed ~ label + a { ... }

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

Answer 2

If you are doing every thing in jQuery then why not do the rest using jQuery itself.

Try this:

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

Not sure though why the same was not working in css

Working Fiddle

This will also work if you have multiple groups.

Check this fiddle

Check this link for more info.