html - 选择单个链接以更改 css 属性

Question

我使用的服务不允许我修改代码，但我可以添加自己的 CSS。我正在尝试更改 li 中特定链接的 CSS。

这是我的代码:

<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">      
<li class="kn-link-1"><a href="1.html" target=""><span><i class="fa fa-bullseye"></i>&nbsp;&nbsp;I'm On Site</span></a></li>  
<li class="kn-link-2"><a href="2.html" target=""><span><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;1. Onsite Staff Signature</span></a></li>  
<li class="kn-link-3"><a href="3.html" target=""><span><i class="fa fa-pencil"></i>&nbsp;&nbsp;2. Service/Signature</span></a></li>  
<li class="kn-link-4"><a href="4.html" target=""><span><i class="fa fa-ban"></i>&nbsp;&nbsp;3. N/A - R</span></a></li>  
<li class="kn-link-5"><a href="5.html" target=""><span>Add Comments</span></a></li>  
<li class="kn-link-6"><a href="6.html" target=""><span><i class="fa fa-check"></i>&nbsp;&nbsp;4. Completed</span></a></li>  
</ul>
</div>

我只想选择第一个列表项并调整其中链接的 css 设置 - 我想让背景颜色和文本不同。使用以下允许我更改某些内容但不能更改该 li 中的实际文本。

.kn-link-1 {
 }

我还想确保此更改仅发生在父 id="view_81"的特定实例中。有人可以帮助找到正确的方法来选择那个

Answer 1

CSS 不是您应该更改内容的正确位置，无论如何如果您别无选择，您可以使用 :after选择器执行以下技巧:

#view_81 > ul > li:nth-child(1) > a > span {
  display: none;
}
#view_81 > ul > li:nth-child(1) > a:after {
  background-color: red;
  content: "your text";
}

<div class="kn-menu kn-view view_81" id="view_81">
  <ul class="kn-tab-menu kn-grid-6">
    <li class="kn-link-1"><a href="1.html" target=""><span><i class="fa fa-bullseye"></i>&nbsp;&nbsp;I'm On Site</span></a>
    </li>
    <li class="kn-link-2"><a href="2.html" target=""><span><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;1. Onsite Staff Signature</span></a>
    </li>
    <li class="kn-link-3"><a href="3.html" target=""><span><i class="fa fa-pencil"></i>&nbsp;&nbsp;2. Service/Signature</span></a>
    </li>
    <li class="kn-link-4"><a href="4.html" target=""><span><i class="fa fa-ban"></i>&nbsp;&nbsp;3. N/A - R</span></a>
    </li>
    <li class="kn-link-5"><a href="5.html" target=""><span>Add Comments</span></a>
    </li>
    <li class="kn-link-6"><a href="6.html" target=""><span><i class="fa fa-check"></i>&nbsp;&nbsp;4. Completed</span></a>
    </li>
  </ul>
</div>