Объединение двух селекторов в CSS3 - PullRequest
1 голос
/ 17 октября 2010

Есть ли способ объединить два селектора? такие как:

#div:hover:not(.class)

Edit:

Я понимаю эту работу, как я написал. Однако как можно добиться эффекта «наведения» для элемента «LI», но исключить эффект наведения, когда мышь находится над определенным «DIV» внутри LI?

Е.Г.

<li>Hello   <div id="#no-hover">Bye</div>  </li>

Я хотел бы получить эффект наведения для li:

li:hover{ text-color:#CCC; }

но каким-то образом исключить эффект наведения, когда мышь находится над элементом # no-hover.

Есть идеи?

Ответы [ 3 ]

3 голосов
/ 17 октября 2010

Исходя из вашего вопроса редактирования, чтобы максимизировать совместимость браузера (я имею в виду, , почему бы не , если можете?), Вы можете обойтись без использования селекторов CSS3 вообще. Попробуйте это, предполагая, что черный цвет является цветом текста по умолчанию:

li, li:hover div#no-hover {
    color: #000;
}

li:hover {
    color: #ccc;
}

Хотя вы можете использовать класс вместо идентификатора, если хотите воздействовать на несколько элементов с классификацией no-hover. В этом случае вы должны сделать это вместо своего первого правила:

li, li:hover div.no-hover {

В любом случае, поскольку выбор потомка с его предком более специфичен, чем выбор только предка, предполагая, что те же комбинаторы на предке переопределят второе правило, даже если это будет позже.

2 голосов
/ 17 октября 2010

В css2 будет:

    li:hover{
       color:#CCC;
    }

     li:hover div{
     color: #000;   
    }

Для CSS3 я согласен с Феликсом Клингом.

2 голосов
/ 17 октября 2010

Обновление:

Если вы хотите, чтобы эффект парения не применялся к Bye, вы можете просто создать для него дополнительное правило hover и установить цвет явно (как показали другие ответы).

Если эффект наведения не должен применяться ко всему элементу li, то я думаю, что сделать это невозможно. Вам нужен какой-то родительский селектор, которого нет в CSS.


Да, и попробовать довольно просто: http://jsfiddle.net/5vaUW/

(возможно, работает только если ваш браузер поддерживает CSS3)

Возможно, вы захотите узнать больше о CSS3 селекторах , где вы можете найти это:

Селектор - это цепочка из одной или нескольких последовательностей простых селекторов, разделенных комбинаторами. Один псевдоэлемент может быть добавлен к последней последовательности простых селекторов в селекторе.

Последовательность простых селекторов - это цепочка простых селекторов, которые не разделены комбинатором. Он всегда начинается с селектора типа или универсального селектора. Никакой другой тип селектора или универсальный селектор не допускается в последовательности.

Простой селектор - это селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора или псевдокласс.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...