Как применить стиль к определенному классу?
Я хотел бы скрыть класс col12, но только col12 под классом content-zone, потому что он у меня есть в других местах, которые я не хочу скрывать. Я пробовал следующее, но не работает:
.content-zone.col12 {
display: none;
}
мой код:
<div class = "content-zone">
<div class = "col12">
</div>
</div>
Если кто-нибудь может посоветовать, как я могу выборочно установить атрибут класса, я был бы признателен.
См. - stackoverflow.com/questions/23292501/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам не хватает пробела между двумя определениями классов.
.content-zone .col12
Это укажет ему искать content-zone, где col12 - это дочерний уровень n.
Однако то, что вы сейчас говорите, - это искать элемент с обоими классами, установленными на одном элементе, также известном как:
<div class = "content-zone col12">
Как вы можете видеть здесь, при использовании пробела он будет соответствовать всем col12 в content-zone независимо от глубины:
.content-zone .col12 {
display: none;
}<div class = "content-zone">
<div class = "col12">Inside div 1</div>
<div>
<div class = "col12">Inside div 2</div>
</div>
</div>
<div class = "col12">Outside div</div>Для непосредственного ребенка используйте > вместо пробела. Это будет соответствовать элементу, только если он является непосредственным потомком content-zone. Как вы можете посмотреть здесь, второй col12 игнорируется, потому что он не является непосредственным потомком content-zone:
.content-zone > .col12 {
display: none;
}<div class = "content-zone">
<div class = "col12">Inside div 1</div>
<div>
<div class = "col12">Inside div 2</div>
</div>
</div>
<div class = "col12">Outside div</div>
вам не хватает пробела между двумя классами
.content-zone .col12. В настоящее время вы говорите, что этот<div class = "content-zone col12">для непосредственного потомка использует>вместо пробела.