0

私はこれを持っています：

DIV#tt {
    background: #fff;
    color: #333;
    margin: 0 0 15px;
    position: relative;
    padding: 1px;
}
DIV#tt A,
DIV#tt SPAN.link {
    color: #990000;
}

これは正常に機能し、リンクの色を変更します。

<div class="someotherclass"><span>My Link </span></a></div>

今私の問題は、時々代わりに緑色が欲しいときに必要があるということです。上記のCSSでその例外を作成し、それをHTMLで呼び出すにはどうすればよいですか？

4

2 に答える 2

4

セレクターは、id を持つ内のdiv#tt aすべてのリンク ( <a>) を特定の方法でスタイルする必要があることを示します。この場合は、色が設定されています。そう：<div>tt

<div id="tt">
    <a href="#">Link 1</a>
</div>
<div id="abc">
    <a href="#">Link2</a>
</div>

この例では、リンク 1 は に従ってスタイル設定されますdiv#tt aが、リンク 2 はそうではありません。

ここで、tt div 内に Link 2 がある場合、次のようになります。

<div id="tt">
    <a href="#">Link 1</a>
    <div id="abc">
        <a href="#">Link 2</a>
    </div>
</div>

次に、リンク 2は、 の css で指定されているように、リンク 1 と同じスタイルになりますdiv#tt a。リンク 2 で別のスタイルが必要な場合は、 のようなセレクターを適用する必要がありますdiv#tt div#abc a。

例については、この JSFiddleを参照してください。

編集

2 つのリンクを同じ行に配置したいがスタイルが異なる場合は、2 番目のリンクを の<span>代わりに で囲むか<div>、改行を強制しないか、2 番目のリンクに id を追加することができます。

を使用する<span>と、これは HTML になります。

<div id="tt">
    <a href="#">Link 1</a>
    <span id="abc"><a href="#">Link 2</a></span>
</div>

次に、 を使用して 2 番目のリンクのスタイルを設定しdiv#tt span#abc aます。

または、2 番目のリンクに ID を追加し、それをスタイルに使用することもできます。HTML:

<div id="tt">
    <a href="#">Link 1</a>
    <a href="#" id="two">Link 2</a>
</div>

次に、一般的に としてリンクをスタイルし、div#tt aを使用して 2 番目のリンクをスタイルしますdiv#tt a#two。

上記を示すために JSFiddle の例を更新しました。

編集2

F.ミュラーによる以下のコメントによると、これは絶対に正しいです。上記の例では id を頻繁に使用していますが、代わりに他の種類のセレクターを使用する方がよいでしょう (特に「セカンダリ」スタイルで複数のリンクをスタイルしたい場合)。

たとえば、リンク 1 とリンク 2 をある方法でスタイルし、リンク 3 とリンク 4 を別の方法でスタイルする場合、これは適切な HTML になります。

<div id="myDiv" class="something">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#" class="secondary">Link 3</a>
    <a href="#" class="secondary">Link 4</a>
</div>

スタイリングは次のようになります。

div.something a {
    /* styling for primary links */
}
div.something a.secondary {
   /* styling for secondary links */
}

ここで、セカンダリ スタイルを他のリンクに追加したい場合は、リンクにクラス名を追加するだけです。(つまり、新しい Link 5 を追加したい場合は、 に追加するだけで、class="secondary"適切<a>にスタイルが設定されます。)

そして、これらの変更を示すために JSFiddle が再度更新されました。

于 2012-08-24T19:49:52.440 に答える
0

あなたのクラスを使用してください：

#tt.someotherclass a, #tt.someotherclass span.link {
    color: green;
}
于 2012-08-24T19:47:52.560 に答える