Селектор потомков не работает

Когда я пытаюсь нацелить все якорные элементы внутри элемента p, используя селектор потомков. Правила применяются только к дочерним элементам, а не к вложенным элементам.

p a {
  display: inline;
  color: red;
}
<p>
  <a href="http://www.reddit.com">Go to Reddit website</a>
  <a href="http://www.quora.com">Go to QUORA</a>
  <div>
    <a href="http://www.channel9.com">channel9</a> 
  </div>
</p>

Источник

5 ответов

Решение

Кажется, ваш HTML является недействительным, попробуйте заменить p с div, Он должен работать. Что-то вроде ниже -

div a {
  display: inline;
  color: red;
}
<div>
  <a href="http://www.reddit.com">Go to Reddit website</a>
  <a href="http://www.quora.com">Go to QUORA</a>
  <div>
    <a href="http://www.channel9.com">channel9</a>  
  </div>
</div>

Для деталей - почему <p> тег не может содержать <div> тег внутри него?

Источник

p тег не может иметь div тег внутри него. Так как это недействительный HTML, ваш браузер исправляет это для вас. Закрывает p пометить, как только он видит div тег. А также добавляет стартовую p тег для закрытия p тег

Ваш фактический HTML

<p>
   <a href="http://www.reddit.com">Go to Reddit website</a>
   <a href="http://www.quora.com">Go to QUORA</a>
   <div>
        <a href="http://www.channel9.com">channel9</a>  
   </div>
</p>

Что это на самом деле делает

<p>
   <a href="http://www.reddit.com">Go to Reddit website</a>
   <a href="http://www.quora.com">Go to QUORA</a>
</p>
<div>
   <a href="http://www.channel9.com">channel9</a>  
</div>
<p></p>

И так как a тег с текстом channel9 не внутри p тэг, твой css не имеет никакого эффекта

Источник 
<p>
   <a href="http://www.reddit.com">Go to Reddit website</a>
   <a href="http://www.quora.com">Go to QUORA</a>
   <div>
        <a href="http://www.channel9.com">channel9</a>  
   </div>
</p>

CSS

a {
   display: inline;
   color: red;
}
Источник

Вы не можете использовать div внутри элемента a p

p a {
  display: inline;
  color: red;
}
<p>
  <a href="http://www.reddit.com">Go to Reddit website</a>
  <a href="http://www.quora.com">Go to QUORA</a>
  <span>
    <a href="http://www.channel9.com">channel9</a> 
  </span>
</p>

Источник

Пожалуйста, используйте этот код вместо кода выше.

.clr-rd a {
  color: red;
  display: inline;
}
<div class="clr-rd">
  <p>
    <a href="http://www.reddit.com">Go to Reddit website</a>
    <a href="http://www.quora.com">Go to QUORA</a>
    <div>
      <a href="http://www.channel9.com">channel9</a> 
    </div>
  </p>
</div>

Источник
Другие вопросы по тегам