CSS свойство для определенного псевдонима класса id?

Question

Кто-нибудь знает, как применить свойство css к тегу, но только когда он находится в определенном div? Я хотел бы, чтобы .router_li div имел эффект наведения, но любые другие ссылки. Я не уверен, что это называется.

Я думаю, что это называется псевдокласс, и я не делаю это правильно. Я попытался это:

a:router_li:hover{ 
    background-color:yellow; 
    width: 200px; 
    height: 60px; 
    background-color: #2c5fac; 
    border: 1px; 
    border-color: #FFFFFF; 
    border-top-right-radius: 8px; 
    border-top-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
    border-bottom-left-radius: 8px; 
    border-style:solid; 
    border-width:1px; 
    color: white; 
} 

Answer 1

идентификаторы, классы и псевдо-классы разные вещи, и CSS имеет различные обозначения для всех трех:

• ID selector
• Class selector
• Pseudo-class

Если вы хотите применять этот конкретный :hover (который является псевдоклассом) только тогда, когда a является div с классом router_li (как в <div class="router_li">), используйте

.router_li a:hover 

Это класс, хотя; если это идентификатор (как в <div id="router_li">), используйте

#router_li a:hover 

В обоих случаях router_li не является псевдо-класс, так как он определен в разметке, а не в CSS, поэтому :router_li в коде является недействительным. Также обратите внимание, что идентификатор/класс (в зависимости от того, что он есть) приходит до a:hover - это называется контекстным селектором (a, только когда он находится в некотором div).

Answer 2

Используйте родительский id как часть селектора:

#parentId a { 
    /* specific CSS styles */ 
} 

JS Fiddle demo.

Это не pseudo-class, конечно (который включает в себя такие вещи, как :hover, :checked, :focus), или pseudo-element (который был бы ::before и ::after). Это простое наследование, выбор элемента на основе предка и то, что подразумевает пространство между #parentId и a.

Вместо этого можно использовать непосредственный дочерний комбинатор >, если не было других предков/потомков между div и a.

Ссылки:

• CSS selectors, at the W3.org.

Answer 3

.router_li a:hover будет предназначаться только парил теги привязки внутри .router_li элемента