2

我有一个看起来像这样的列表 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 解决方案来解决这个问题。我有很多这样的列表，手动解决方案是不可行的。

4

5 回答 5

2

使用nth-childCSS3 选择器<a>通过它的索引来选择元素<li>：

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

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

于 2013-03-09T16:23:30.890 回答
1

您要在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/

于 2013-03-09T16:23:33.617 回答
1

利用：

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

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

于 2013-03-09T16:23:40.457 回答
1

向您想要不同颜色的链接添加一个类：

.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>
于 2013-03-09T16:25:23.250 回答
0

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

于 2013-03-09T16:25:47.713 回答