селектор не работает должным образом

У меня есть контейнер с классом .headerRightZone этот контейнер имеет элементы с классом .btn некоторые из них имеет класс .hiddenселектор не работает должным образом

Цель: Мне нужно выбрать (селектор записи) последнюю видимую (кнопка без. скрытый класс) кнопка

myhtml.html

<div class="headerRightZone"> 
    <a href="javascript: void(0)" class="btn">Button 1</a> 
    <a href="javascript: void(0)" class="btn">Button 2</a> 
    <a href="javascript: void(0)" class="btn">Button 3</a> 
    <a href="javascript: void(0)" class="btn hidden">Button 4</a> 
    <a href="javascript: void(0)" class="btn hidden">Button 5</a> 
</div>

mycss.css

.hidden{ 
    display: none; 
} 

.btn{ 
    background-color: #fff; 
} 

.headerRightZone .btn:not(.hidden):last-of-type{ 
    background-color: #f00; 
}

Я писал:

.headerRightZone .btn:not(.hidden):last-of-type

Но он возвращает пустой массив.

Прикрепленный jsFiddle Example

Что плохого в коде? Почему массив пуст?

источник

2016-11-23 Mike Mameko

«он возвращает пустой массив» - звучит, как это не CSS, но вместо JavaScript. Не могли бы вы предоставить код, который вы используете здесь? –

Приложен пример jsFiddle. Я ожидал, что третий якорь должен быть с красным фоном –

, если вы уверены, что хотите, чтобы кнопка третьего якоря была красной, вы можете выбрать nth-child (3), я просто обновляю jsfiddle https://jsfiddle.net/icenova/po3fcuo6/1/ – Anami

Проблема в том, что последний тип не работает, как вы его ожидаете.

Он будет оценивать только по типу элемента, в данном случае a, ему не нужны классы. Селектор, который вы написали, может влиять только на последний тег привязки, независимо от того, какие классы он имеет. Так как ваш последний элемент не отображается, вы не видите, что ваши стили установлены.

скрытие различных элементов демонстрирует это: updated fiddle

Чтобы решить проблему, вам нужно будет использовать Javascript или JQuery, поскольку это выходит за рамки возможностей CSS.

Некоторые хорошие предложения уже сделаны раньше: here

источник

2016-11-23 11:55:12 hairmot

селектор не работает должным образом

ответ

Смежные вопросы