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 =＆＃34; view_81＆＃34;的特定实例中。有人可以帮助找到正确的方法来选择那个

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>

Answer 2

你试过了吗？

#view_81 ul li.kn-link-1

或

#view_81 ul li:first-child

澄清我的例子：CSS中的“＃”选择器意味着“具有以下ID的那个”然后我告诉之后出现的“ul”然后是之后出现的“li” class“kn-link-1”或标签内的第一个项目（：first-child子选择器）。

我希望他们中的一些能够提供帮助。

Answer 3

使用这种风格：

li:first-of-type span
{

}

还要确保您的样式链接在样式引用中是最后一个。如果这没有帮助，请使用“！important”声明您的样式，如下所示：

li:first-of-type span
{
    color:red !important;
}

Answer 4

使用选择器：#view_81 .kn-link-1 a将带有id="view_81"的元素和带有class="kn-link-1"的后代元素及其中的a标记定位，以更改背景和文本颜色。< / p>

＆＃13;

#view_81 .kn-link-1 > a {
  background: red;
  color: yellow;
}

＆＃13;

<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>

＆＃13;

Answer 5

我会像这样设计css：

 <style>
 #view_81 .kn-link-1{
     padding: 50px;
     background-color: gray;    
 }
 #view_81 .kn-link-1 a{
     text-decoration: none;
 }
 #view_81 .kn-link-1 span{
     color: white;
     font-weight: bold;
     text-shadow: 1px 2px 2px black;
 }
 </style>

此css仅适用于id＃view_81中的.kn-link-1类。

我为您的测试目的添加了一些基本的CSS，但您明白了。

选择一个链接以更改css属性

5 个答案: