У меня есть страница со следующей структурой. Я хочу применить цвет фона для каждого "componentet-4", но хочу применить другой цвет только для первого элемента "componentet-4". Как указать первый элемент из других. Мне также нужно поддерживать IE7 и IE8. Я не могу использовать Javascript, я хочу получить его, используя css, возможно ли это? Пожалуйста, посоветуйте мне.
<html>
<body>
<div id="component-1">
<div class="component-2">
<div class="component-3">
<div class="component-4">
</div>
</div>
</div>
<div class="component-2">
<div class="component-3">
<div class="component-4">
</div>
</div>
</div>
<div class="component-2">
<div class="component-3">
<div class="component-4">
</div>
</div>
</div>
</div>
</body>
</html>
Пожалуйста, советую мне..
использовать псевдокласс класса first-child
.component-4{
background:red
}
.component-2:first-child .component-4{
background:green
}
Я должен сказать, что у меня нет IE 7 или 8, но я тестировал его с помощью эмулятора IE.
вот пример того, что вам нужно: http://jsfiddle.net/fatgamer85/ffVW3/
У вас есть элемент div с id- component-1
и внутри него несколько divs с повторяющимися классами component-2, component-3 and component-4
Вы можете индивидуально стилизовать эти элементы, используя классы, как в примере. трюк просто изменить цвет фона для первого div (или любого div) заключается в том, чтобы узнать уровень div, который вам нужно изменить, и применить к нему CSS Pseudo class (MDN) (W3S) (CSSTricks).
Это довольно просто. Следующий код: (1)
.component-2 {
background: red;
}
применяет все элементы с классом- component-2
с красным фоном.
и следующий код: (2)
.component-4{
background: pink;
}
применяет все элементы с классом- component-4
с розовым фоном. Согласно вашему коду, другим способом написания вышеуказанного кода будет: (3)
.component-2 .component-4{
background: pink;
}
применяет все элементы с классом- component-4
в component-2
с розовым фоном.
Мы знаем, что в вашем коде есть несколько классов component-2
, component-3
и component-4
.
Следуя иерархии, #component-1
имеет несколько component-2
которых есть component-3
которого есть component-4
поэтому, если мы опускаем #component-1
у нас есть 3 divs с классами- component-2
на одном уровне иерархии.
Pseudo Selector имеет селектора для различных случаев (первый ребенок, последний ребенок, n-й, четный, нечетный и т.д.). Для вашего кода вы знаете, что вам нужно изменить цвет первого элемента.
поэтому, чтобы изменить цвет первого component-4
, нам нужно пройти вверх по дереву, чтобы найти повторяющийся узел. который в этом случае является component-2
. Правильный способ выбора этого элемента для добавления правил css с использованием псевдо класса - это (4)
.component-2:first-child{
/* css rules here */
}
теперь, когда мы знаем, что все, что написано на стороне этого контейнера, применяется к первому div из класса- component-2
, позволяет применить этот селектор класса к одному из вышеупомянутых селекторов, как указано в (3)
.component-2:first-child .component-4{
/* css rules here */
}
Это правило указывает, что ТОЛЬКО первый div с дочерним component-2
класса component-2
с классом- component-4
должен иметь применимые к нему правила css.
Таким образом, сделав это, вы достигнете своего результата.
Вы можете поиграть, изменив псевдокласс на :last-child
или :nth-child(2)
чтобы увидеть различия, которые могут создавать псевдо-классы.
Я знаю, что это длинный пост для простого ответа, но я надеюсь, что вы узнаете что-то из этого.
ура!
.component-1>.component-2 .component-4