后代选择器不起作用

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>

详情 - Why <p> tag can't contain <div> tag inside it?

Answer 2

您不能在 p 元素中使用 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，您的浏览器会为您更正。它会在看到 div 标签后立即关闭 p 标签。并且还为结束 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>

并且由于带有文本 channel9 的 a 标签不在 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>

后代选择器不起作用

descendant selector not working

css

css-selectors

descendant