伪类：在特定 <li> 元素中的选择器之前 [关闭]答案

【问题标题】：Pseudo class :before selectors in specific <li> element [closed]伪类：在特定 <li> 元素中的选择器之前 [关闭]
【发布时间】：2020-07-30 08:02:07
【问题描述】：

我需要为无序列表中的每个项目添加不同的文本。 ul 有一个类名，但我不能使用 :before 伪类修改 li 元素。因为我有其他列表，所以我真的需要在每个 ul/li 组合中指定元素。我错过了什么吗？

    ul.links li:nth-child(1) a:before {
      content: "++";
      padding-right: 7px;
    }

    ul.links li:nth-child(2) a:before{
      content: "**";
      padding-right: 7px;
    }
    
   ul.links li:nth-child(3) a:before{
      content: "##";
      padding-right: 7px;
    }

<ul class="link">
  <li><a href="#">List Linked Item</a></li>
  <li><a href="#">List Linked Item</a></li>
  <li><a href="#">List Linked Item</a></li>
</ul>

【问题讨论】：

ul 类是 link，你的 CSS 选择器是 .links。
就是这样。非常感谢！

标签： css pseudo-class

【解决方案1】：

由于您正在为无序列表中的所有内容设置样式，因此您可以简单地编写以下代码：

.link>*:before {
  content: /*your content here*/;
}

或者问题不够清楚

【讨论】：

您好，感谢您的评论。我对其进行了更改以更好地反映问题-我确实需要更改特定 ul 下的每个 li 元素。我有另一个带有伪类的列表，因此在这种情况下，我需要将 :before 应用于此特定
中的项目

【解决方案2】：

只需在 CSS 和 HTML 中将类名更改为相同

    ul.link li:nth-child(1) a:before {
      content: "++";
      padding-right: 7px;
    }

    ul.link li:nth-child(2) a:before{
      content: "**";
      padding-right: 7px;
    }
    
   ul.link li:nth-child(3) a:before{
      content: "##";
      padding-right: 7px;
    }

<ul class="link">
  <li><a href="#">List Linked Item</a></li>
  <li><a href="#">List Linked Item</a></li>
  <li><a href="#">List Linked Item</a></li>
</ul>

【讨论】：