Применить правила CSS к вложенному классу внутри div

Я не знаю точно, как применить CSS к вложенному элементу. Вот мой пример кода, но я ищу руководство, которое объясняет все правила:

<div id="content">
  <div id="main_text">
    <h2 class="title"></h2>
  </div>
</div>

Как я могу применить CSS только к классу title, вложенному в этот конкретный div?

Ответ 1

Вы используете

#main_text .title {
  /* Properties */
}

Если вы просто поместите пробел между селекторами, стили будут применяться ко всем потомкам (и потомкам потомков) первого. Так что в этом случае, любой дочерний элемент #main_text с именем класса title. Если вы используете > вместо пробела, он выберет только прямой дочерний элемент элемента, а не дочерние дочерние элементы, например:

#main_text > .title {
  /* Properties */
}

В этом случае будет работать любой из них, но чаще используется первый.

Ответ 2

Используйте Css Selector для этого или узнайте больше о Css Selector, просто зайдите сюда https://www.w3schools.com/cssref/css_selectors.asp

#main_text > .title {
  /* Style goes here */
}

#main_text .title {
  /* Style goes here */
}