css - 后代选择器不起作用

Question

当我尝试使用后代选择器定位 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>

Answer 1

似乎您的 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>

Answer 2

不能在 ap 元素中使用 div

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>

Answer 3

<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;
}

Answer 4

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 没有任何效果

Answer 5

请使用此代码而不是上面的代码。

.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>