Селектор CSS и HTML

Question

Ниже приведен мой код CSS и HTML.

Учитывая CSS селектор не применяется, когда существует hidden поле между INPUTSPAN и теги

CSS

input[type="checkbox"] + .lbl:before { 
    background-color: #FAFAFA; 
    border: 1px solid #CCCCCC; 
} 

CSS Рабочая

<label> 
<input name="SMS" type="checkbox" /> 
<span class="lbl"> choice 2</span> 
</label> 

CSS N ВЗ Applied

<label> 
<input name="SMS" type="checkbox" /> 
<input type="hidden" value="false" name="SMS"> 
<span class="lbl"> choice 2</span> 
</label> 

Как я могу изменить/добавить новые изменения селектора CSS для поддержки обоих случаев?

Примечание:Hidden поле генерируется автоматически ASP.Net MVC рамки, и мы не имеем контроля, чтобы поместить его в другом месте

Answer 1

Вы можете использовать general sibling combinator~, если вы пытаетесь стиль родного брата, который не обязательно сразу после очередного элемента.

Так что в вашем случае

input[type="checkbox"] ~ .lbl:before { 
    background-color: #FAFAFA; 
    border: 1px solid #CCCCCC; 
} 

бы работать в обеих сценариях

http://jsfiddle.net/Hx8ZG/

Answer 2

+ указывает, что элемент помещается сразу после флажком.

Вы можете изменить его на >, который указывает на родителя.

input[type="checkbox"] > .lbl:before { 
    background-color: #FAFAFA; 
    border: 1px solid #CCCCCC; 
} 

http://jsfiddle.net/TkamX/

Примечание: Я добавил новый div и использовал его в качестве родительского элемента.

div > .lbl { 
    background-color: #FAFAFA; 
    border: 1px solid #CCCCCC; 
} 

Вы также можете использовать один селектор, давая ваш span идентификатор, а затем выберите его основе.

Answer 3

Если единственный возможный вопрос здесь является скрытым полем ввода между флажком и размахом, то вы должны иметь возможность ссылаться на это в вашем селекторе:

input[type="checkbox"] + input[type="hidden"] + .lbl:before { 
    .... 
} 

В качестве альтернативы, если скрытое поле может или не может быть там, то вам необходимо разрешить для обоих вариантов:

input[type="checkbox"] + .lbl:before, input[type="checkbox"] + input[type="hidden"] + .lbl:before { 
    .... 
} 

Если может быть больше элементов между ними, и вы не знаете, что они могут быть, тогда вам нужно будет поменять ваш селектор + для селектора ~, который выбирает любой родственный брат, а не соседний.

input[type="checkbox"] ~ .lbl:before { 
    .... 
} 

Этот вариант может быть самым простым, но есть предостережение, что он может выбрать вещи, которые не были бы выбраны вашим оригинальным + селектором.

Надеюсь, что это поможет.