仅当父元素具有特定类时才为列表项元素设置样式[重复]

Posted 2023-03-05

【中文标题】仅当父元素具有特定类时才为列表项元素设置样式[重复]

【英文标题】：Style a List Item element only when the parent element has a specific class [duplicate]

【发布时间】：2022-01-24 03:15:08

【问题描述】：

我对 CSS 并不陌生，我知道有一个简单的解决方案，但我在任何地方都找不到它（我在解决方案上画了一个空白）。

我有以下代码：

<p class="paragraph">
  blablabla, some text here!

  <ol>
    <li class="nobullet">
      <p class="bold">Related Articles</p>
    </li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
  </ol>
</p>
<p class="footer">
  <ol>
    <li class="nobullet">
      <p class="bold">Non-Related Articles</p>
    </li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
  </ol>
</p>

我想将规则“color:red”添加到“段落”类的段落元素内的有序列表中的列表项（所以只有第一个有序列表）。

我试过了……

.paragraph ol licolor:red;

.paragraph, ol, licolor:red;

第二个有效；但是，它也可以设置其他 OL 元素的样式！

提前致谢！

【参考方案1】：

这不起作用的原因是段落元素不能包含其他块元素。

段落是块级元素，如果在关闭

标记之前解析另一个块级元素，则会自动关闭。

https://developer.mozilla.org/en-US/docs/Web/html/Element/p

如果您检查生成的 html，您将看到 <p> 标记在 <ol> 之前自动关闭，因此您的 css 规则不再适用。

【参考方案2】：

我建议您执行以下操作（作为变体）

.paragraph p,
.paragraph a:link,
.paragraph a:visited 
  color: red;

<div class="paragraph">
  blablabla, some text here!
  <ol>
    <li class="nobullet">
      <p class="bold">Related Articles</p>
    </li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
  </ol>
</div>
<div class="footer">
  <ol>
    <li class="nobullet">
      <p class="bold">Non-Related Articles</p>
    </li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
  </ol>
</div>