почему оформление текста не работает в этой ситуации?

#html #css

#HTML #css

Вопрос:

Знаете ли вы причину, по которой оформление текста не работает в этом случае?

 #menu {
  text-decoration: none;
}

 <div id='menu'>
  <a href='1.html'>Home</a>
  <a href='2.html'>Home</a>
  <a href='3.html'>Home</a>
  <a href='4.html'>Home</a>
</div>

Кстати, приведенный ниже CSS-код был доработан.

 a{
  text-decoration: none;
}

Ответ №1:

оформление текста не является наследуемым свойством.
Если вам действительно нужно применить это к дочерним элементам #menu, вам нужно явно inherit указать их.

 #menu   { text-decoration: none;    }
#menu a { text-decoration: inherit; }

 <div id='menu'>
  <a href='1.html'>Home</a>
  <a href='2.html'>Home</a>
  <a href='3.html'>Home</a>
  <a href='4.html'>Home</a>
</div>

Ответ №2:

Оформление текста не наследуется (поэтому <a> элемент не унаследует его от <div> элемента), вот почему «это не работает» в первом случае.

Кроме того, каждый браузер имеет некоторые значения CSS по умолчанию, и большинство браузеров имеют оформление текста по умолчанию: подчеркивание для <a> элементов.

Как вы уже заметили, как только вы нацелитесь на правильный элемент ( <a> а не на #menu, который является <div> ), это сработает!

Ответ №3:

Будет работать следующее.

 #menu a {
  text-decoration: none;
}

 <div id='menu'>
  <a href='1.html'>Home</a>
  <a href='2.html'>Home</a>
  <a href='3.html'>Home</a>
  <a href='4.html'>Home</a>
</div>

В вашей версии вы выбрали сам #menu элемент, а не его дочерние элементы.

CSS-селектор #menu a будет обращаться ко всем <a> элементам, которые являются потомками (прямыми или косвенными дочерними элементами) элемента с идентификатором menu .

Если вы хотите, чтобы были затронуты только прямые дочерние элементы #menu , вам следует использовать #menu > a вместо этого.