伪 class ：在特定 <li> 元素中的选择器之前

Question

我需要为无序列表中的每一项添加不同的文本。 ul 有一个 class 名称，但我无法使用 :before pseudo class 修改 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>

Answer 1

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

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

或者问题不够明确

Answer 2

只需将 class 名称更改为 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>

伪 class ：在特定 <li> 元素中的选择器之前

Pseudo class :before selectors in specific <li> element

css

pseudo-class