Стиль вложенных div без указания имени класса
Я хотел бы изменить стили для вложенных div, как в примере ниже:
<div class = "box"> #1
<div> #2
<div> #3
<div> #4
<div></div> #5
<div></div> #6
<div></div> #7 **How to style this div when class name is not present?**
</div>
</div>
</div>
</div>
Я смог получить доступ к div # 4 таким образом:
.box div div div {}
Но как получить доступ к div # 5 # 6 # 7?
j08691 Если вы знаете, пожалуйста, покажите, как получить доступ к # 7, спасибо
Есть способы сделать это, но вы создадите кошмар обслуживания. Посмотрите на nth-of-type() или другой селектор типа для одного варианта. (Но, пожалуйста, подумайте, лучший ли это подход)
если этот или какой-либо ответ помог решить ваш вопрос, пожалуйста, примите его, нажав галочку и проголосовав за. Это указывает широкому сообществу на то, что вы нашли решение, и дает некоторую репутацию как автору, так и вам. Это не обязательно :)
Ответы 4
Для доступа к # 7 у вас есть две или три опции все, из которых используется прямой селектор потомков >, чтобы ограничить контекст дочерними элементами div # 4.
.box div div div > div:last-of-type{}
/* assumes there are no additional divs after #7 */
или же
.box div div div> div:last-child {}
/* assumes that the div is, in fact, the last child
или даже
.box div div div> div:nth-child(3) {}
/* assumes that the 3rd child is a div */
Если эти последние три элемента div действительно предназначались для того, чтобы не иметь содержимого, есть ярлык:
.box div:empty:after { content: 'I am empty'; } /* all of them */
.box div:empty:nth-child(1):after { content: 'Child 1'; } /* specific */
Вы можете просто добиться этого, выполнив следующую строку css
.box div:nth-child(3) {
border: 1px solid red;
}<div class = "box">
<div>
1
<div>
2
<div>
3
<div> 4</div>
<div> 5</div>
<div> 7</div>
</div>
</div>
</div>
</div>
Честно говоря, вам нужно В самом деле, чтобы начать использовать классы.