1

OK、私は CSS カスケードと特異性を「科学」として理解しようとしており、常に「ヒットまたはミス」アプローチに任せているわけではありません。誰かが私を助けてくれることを願っています。

私にはルールがあります：

.bluebutton {margin: 0 10px 6px 0;} /* rule 1 */

特定のインスタンスで余白を変更するには、上書きする必要があります。

そこで、 に a を追加しclassて、次のdivように書きました。

.aside-right .bluebutton a {margin:30px 0 0 100px;} /* rule 2 */

ただし、ルール 2 はルール 1 を上書きしませんでした。

そこで、ルール 2 を次のように変更しました。

.aside-right a.bluebutton {margin:30px 0 0 100px;} /* rule 3 */

.bluebutton" " ルールを上書きします。/* ルール 1 */

最初に私はこのHTMLを書きました 

 <a class="blueButton aside-right" href="enrollNow.html"><span>Enroll Now</span></a> <!-- html-1 -->

次に、ボタンを a 内に変更して含め、次のdivように書きました。

<div class="aside-right"><a class="blueButton" href="enrollNow.html"><span>Enroll Now</span></a></div> <!-- html-2 -->

html-2 はルール 3 で動作しました。

ルール 3 がルール 1 を上書きし、ルール 2 がルール 1 を上書きしない理由を誰かが理解するのを手伝ってくれますか? ルール 2 と 3 の重みは同じに見えます (私には)。ルール 2 はanchor任意の要素内の任意のタグを対象とし、ルール 3 は of を含むタグのみを対象classとするためでしょうか? 私が理解しようとしていることを明確に説明したことを願っています。.bluebutton.asideanchorclass.bluebutton

ありがとう！

4

3 に答える 3

5

ルール 2 は、ルール 1 と同じ要素を選択しません。

ルール 1 はbluebuttonクラスを持つ任意の要素を選択します

ルール 2<a>は、クラスを持つ要素の子孫であるクラスを持つ要素のbluebutton子孫であるaside-right要素を、クラスを持つ html 要素から子孫bluebuttonを持たない要素から選択します。<a>

于 2012-08-26T02:54:14.460 に答える
1

ルール1
.bluebuttonは、クラスを持つすべての要素を対象としbluebuttonます。

ルール2
.aside-right .bluebutton aは、要素内にネストされたアンカー要素をターゲットにし、要素内にネストされたアンカー要素をターゲットにclass="bluebutton"しclass="aside-right"ます。構造例：

<div class="aside-right">
    <div class="bluebutton">
        <a href="#">link</a>
    <div>
<div>

ルール3は、要素内にネストされた
.aside-right a.bluebuttonアンカーを対象とします。構造例：class="bluebutton"class="aside-right"

<div class="aside-right">
    <a class="bluebutton" href="#">link</a>
<div>
于 2012-08-26T03:01:21.133 に答える
1

.bluebutton aとa.bluebuttonは同等ではありません。1 つ目は、 class を持つ要素内にaある要素を検索します。2 つ目は、 classを持つ要素である要素を検索します。bluebuttonabluebutton

于 2012-08-26T02:58:34.587 に答える