Question

我有一个列表CSS样式，如下所示：

.my-list {
    text-align: center;
    list-style: none;
    a { color: #000000; }
}

我想用另一种颜色设置此列表中某些链接的颜色。我怎么能这样做？

<li class=my-list>

    <a href="www.blah.com">this link is black</a>

    <a href="www.blahblah.com">I WANT THIS LINK TO BE ANOTHER COLOR</a>

</li>

我想要一个解决这个问题的CSS解决方案，不需要手动更改链接颜色。我有很多这些列表，手动解决方案是不可行的。

Answer 1

使用nth-child CSS3选择器在<a>中选择<li>元素的索引：

.my-list a:nth-child(2) {
    color: red;
}

示例：http://jsfiddle.net/6hCWY/

Answer 2

您想在a之后添加mylist，表示您要将此CSS应用于a代码。您可以使用pseudo selectors, first-child, nth-child选择列表中的特定标记：

.my-list a {
    background-color : #000000; 
}

使用first-child伪选择器。

.my-list a:first-child {
    background-color: red;
}

选择列表中的第二个链接

使用nth-child selector：

.my-list a:nth-child(2) {
    background-color: red;
}

http://jsfiddle.net/6JSSJ/

Answer 3

使用：

.my-list {
  //some styles here
}
.my-list a {
  //some styles for links here
}

你不能在块中嵌套CSS，它不像编程语言。将块嵌套在另一个块中的唯一情况是用于定义媒体查询。

Answer 4

将类添加到您想要不同颜色的链接：

.my-list {
    text-align: center;
    list-style: none;
}

.my-list a.diffcolor {
    color:red

}

然后你可以在课堂上标记你想要那种颜色的那些。

<li class=my-list>

    <a href="www.blah.com">this link is black</a>

    <a href="www.blahblah.com" class="diffcolor">I WANT THIS LINK TO BE ANOTHER COLOR</a>

</li>

Answer 5

您可以添加其他CSS类或使用属性选择器http://css-tricks.com/attribute-selectors/

链接样式仅列出列表中的特定链接

5 个答案: