Question

我有以下结构：

<li class="dsq-widget-item">     
    <a href="https://disqus.com/by/"><img class="dsq-widget-avatar" src="#"></a>
    <a class="dsq-widget-user" href="https://disqus.com/by//">Foo</a>    
    <span class="dsq-widget-comment">
         <p>Hello</p>
    </span>  
    <p class="dsq-widget-meta">
        <a href="#">How to</a>&nbsp;·&nbsp;<a href="#">19 minutes ago</a>
    </p>
</li>

如何看到我有三个a标记，我需要将自定义颜色（例如蓝色）应用于第二个a标记。

实际上所有的链接都有这个类：

.widget a {
color: #777;
}

任何解决方案

Answer 1

.dsq-widget-item a:nth-child(2) {
    color: #777;
}

或者如果您确定：

.dsq-widget-user {color: #777;}

Answer 2

我只是将此代码放在样式表中，您就可以获得所需的输出

.dsq-widget-item > a:nth-child(2){
    background-color: red;
}

这里我使用了子选择器，你可以参考更多来自here

工作代码：

＆＃13;

.dsq-widget-item > a:nth-child(2){
			background-color: red;
		}

＆＃13;

<li class="dsq-widget-item">     
    <a href="https://disqus.com/by/"><img class="dsq-widget-avatar" src="#"></a>
    <a class="dsq-widget-user" href="https://disqus.com/by//">Foo</a>    
    <span class="dsq-widget-comment">
         <p>Hello</p>
    </span>  
    <p class="dsq-widget-meta">
        <a href="#">How to</a>&nbsp;·&nbsp;<a href="#">19 minutes ago</a>
    </p>
	</li>

＆＃13;

Answer 3

第二个链接有一个类，所以只需使用它来定位它。

a {
color: #777;
}

.dsq-widget-user {
  color: red;
}

<li class="dsq-widget-item">     
    <a href="https://disqus.com/by/"><img class="dsq-widget-avatar" src="#"></a>
    <a class="dsq-widget-user" href="https://disqus.com/by//">Foo</a>    
    <span class="dsq-widget-comment">
         <p>Hello</p>
    </span>  
    <p class="dsq-widget-meta">
        <a href="#">How to</a>&nbsp;·&nbsp;<a href="#">19 minutes ago</a>
    </p>
</li>

如何将颜色应用于特定标签？

3 个答案: