Могу ли я ввести тег в тег с помощью css

Question

Мне нужно изменить элемент a, пока я в элементе b. Могу ли я это сделать, используя только CSS/HTML, это мой вопрос?

li:active{ 
    img{ 
     border:1px solid black; 
    } 
} 

Answer 1

Нет, что вы можете сделать, однако, быть немного более конкретными с селектором - попробуйте следующее:

li:active img{ 
    border:1px solid black; 
} 

Bon Voyage!

Answer 2

Вы будете хотеть ...

li:active img { 
    border:1px solid black; 
} 

это будет стиль всеimg элементы в li:active. Если вы хотите, чтобы стиль немедленные потомков последнего, вам нужно:

li:active > img { 
    border:1px solid black; 
} 

Я предлагаю вам прочитать на статью Криса Coyier в «Child and Sibling Selectors», чтобы узнать о более сложных CSS. Кроме того, существуют более сложные селектора CSS на основе позиционных отношений, таких как li:active + img и li:active ~ img, но это выходит за рамки этого ответа.

Однако, что вы предлагаете, на самом деле возможно, используя , который является препроцессором CSS.

Answer 3

Вы можете сделать это следующим образом:

li:active img{ 
    border:1px solid black; 
} 

Answer 4

вы можете использовать селектор потомков: li:active img {boder:1px solid black;} или селектор ребенка li:active > img {boder:1px solid black;} если img является прямым потомком li

Answer 5

CSS3 позволяет Embeded селекторов где есть условие. Пример допустимых вложенных спецификаций CSS3 CSS, используя это:

@media screen and (max-width:800px) { 
    ul { 
     float: none; 
     max-width: auto; 
     width: auto; 
    } 
    div:first-of-type { 
     display: none; 
    } 
} 

условия установлено здесь, чтобы установить такие стили, вложенные когда media типа screen (так называемый рабочий стол), и не больше, чем 800px (max-width: 800px).

Answer 6

Вы можете сделать следующее вместо:

li:active img{ 
    border:1px solid black; 
} 

Синтаксис вы имеете в виду похож на nested rules в CSS пре-процессоры, такие как LESS. Этот синтаксис не поддерживается изначально браузерами и должен быть скомпилирован в допустимый синтаксис CSS.

#header { 
    color: black; 
    .navigation { 
    font-size: 12px; 
    } 
    .logo { 
    width: 300px; 
    } 
} 

становится:

#header { 
    color: black; 
} 
#header .navigation { 
    font-size: 12px; 
} 
#header .logo { 
    width: 300px; 
} 

http://lesscss.org/features/#features-overview-feature-nested-rules

Answer 7

li:active img{ 
border: 1px solid black; 
} 

Это правильный ответ, если вы хотите использовать 2 класса или любой другой в 1 пункте вы поместите их в начале , ПРИМЕЧАНИЕ: чтобы объединить 2 элемента, вы делаете это с помощью пробела. Надеюсь, это помогло.