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後に追加します。リスト内の特定のタグを選択するために使用できます。mylistCSSapseudo selectors, first-child, nth-child

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

first-child擬似セレクターの使用。

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

リストの 2 番目のリンクを選択するには

次を使用し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 に答える