Блог

Главная - Вопросы по программированию - CSS, учитывая имя класса родительского элемента и дочернего элемента, как выбрать дочерний элемент?

CSS, учитывая имя класса родительского элемента и дочернего элемента, как выбрать дочерний элемент?

#html #css #reactjs

#HTML #css — код #reactjs

Вопрос:

У меня есть проект Reactjs, в котором у меня есть следующие компоненты: я хочу скрыть div с именем класса ‘tool’, когда тело имеет имя класса ‘hasModal’, и показать div ‘tool’, когда я удаляю className ‘hasModal’. Я знаю, как удалить и добавить className с помощью document.body.classList.add / remove, и я использую display:none, чтобы скрыть элемент. Но я не знаю, как выбрать элемент «инструмент».

 <body class="hasModal">
 ...
 many levels of div
 ...
  <div class="tool">
  </div>
</div>

Мое первое намерение — использовать body.hasModal > div.tool{display: none}, но ничего не произошло, я все еще вижу div;
Я пытаюсь использовать .hasModal.инструмент {отображение: отсутствует}, но это не вступает в силу;
Я также использую .hasModal>.tool{display:none}, но это тоже может не сработать.
Может ли кто-нибудь помочь мне с этим? Большое спасибо!

Ответ №1:

.hasModal > .tool не сработает, потому tool что должен быть прямым дочерним hasModal элементом, и у вас есть «много уровней div» между ними.

 .b {
  background-color: red;
}

.a > .b {
  background-color: teal;
} 
 <div class="a">
  <div class="b">
    works
  </div>
</div>

<div class="a">
  <div class="whatever">
    <div class="b">
      works not
    </div>
  </div>
</div>

.hasModal.tool не будет работать, потому что он выбирает все элементы, которые имеют оба класса hasModal и tool .

 .b {
  background-color: red;
}

.a.b {
  background-color: teal;
} 
 <div class="a b">
    works
</div>

<div class="a">
  <div class="b">
    works not
  </div>
</div>

Вы должны использовать «Комбинатор-потомок», который представляет собой просто пробел.

 .b {
  background-color: red;
}

.a .b {
  background-color: teal;
} 
 <div class="a">
  <div class="b">
    works
  </div>
</div>

<div class="a">
  <div class="whatever">
    <div class="b">
      works!
    </div>
  </div>
</div>

Видишь https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors подробнее о CSS-селекторах и о том, как работают их комбинаторы.

Комментарии:

1. Это должно быть общепринятым ответом. Намного лучше, чем у меня

2. Большое спасибо за ваш ответ!

Ответ №2:

Сделать это довольно просто:

 .hasModal .tool {
  display: none;
}

В CSS для выбора потомка класса вы можете использовать пробел между именами классов, как указано выше.

Кроме того, вам следует обратиться к школам W3 для получения дополнительной информации о селекторах CSS

Метки: , ,