3

こんにちは、ブログのCSSで問題が発生しています。私のWordpressテーマには、CSSファイルに投稿スタイルセクションがあり、クラス「Entry」があり、記事領域内のリンクに「a」属性が定義されています。cssジェネレーターからボタンを生成し、hrefを使用して他のWebサイトを指している記事にボタンを挿入しました。私のCSSファイルには次のようなものがあります

.Entry a{color:black;text-decoration:underline};

.button {background:black;color:white And some other Styling};

このコードを使用してボタンを表示しました。

<a href="some link" class="button">Go to this link</a>

class = "button"を使用しない場合、リンクはエントリのプロパティをたどります。ただし、クラスを使用すると、エントリaとクラスボタンのスタイルが混在するボタンが表示されます。ボタンでエントリプロパティを使用したくありません。何か助けはありますか？

4

6 に答える 6

5

CSS3:not疑似クラスセレクターを使用して最初のルールを次のように書き直すことができます。

.Entry a:not(.button) {color:black;text-decoration:underline}

これは必要なことを実行しますが、9より前のIEバージョンではサポートされていません。

真のクロスブラウザソリューションはより複雑です。ルールに.Entry a適用される属性を「元に戻す」必要があります。.button例えば：

.Entry a {color:black;text-decoration:underline}

.button {color:white;text-decoration:none;background:black}

更新：私は非常に重要なことを忘れました。

「元に戻す」ルートを使用する場合は、「元に戻す」セレクターの特異性が少なくとも最初のセレクターの特異性と同じであることを確認する必要があります。リンク先のページ（長くはありません）を読んで、概念を理解することをお勧めします。この特定のケースでは、これを達成するためa.buttonに、単にではなく書く必要があります.button。

于 2012-08-07T10:17:09.790 に答える
2

.Entry aセレクターを使用するときにCSSスタイルが適用されないようにするには、で定義されているすべてのプロパティを.buttonセレクターで上書きする必要があります。.button.Entry a

例えば：

.Entry a{color:black;text-decoration:underline};

.button {color:white;text-decoration:none;background:black;color:white And some other Styling};
于 2012-08-07T10:16:50.743 に答える
2

これ.Entry aは、がよりも高い特異性を持っているために発生し.buttonます。その結果、要素はbackgroundから実際のプロパティを受け取りますが、.buttonそのプロパティはから取得されます。colortext-decoration.Entry a

これを「修正」する方法はいくつかあります。

  • .buttonセレクターの特異性を高めます。
    たとえば、タグでのみ使用する場合.buttonはa、セレクターをに変更できますa.button。.Entry aこの新しいセレクターは（1つのタグ値と1つのクラス値）と同じ特異性を持つため、「勝者」はソースの順序によって決定されます。CSSファイルのa.button後に来る場合は、優先されます。.Entry aa.button
  • .Entry aセレクターの特異性を下げます。
    本当に要素a内のタグのみをターゲットにする必要がありますか？すべてのタグ.Entryの基本スタイルにするだけで解決できますか？可能であれば、に変更するaだけです。この新しいセレクターにはタグ値が1つしかありません。これは、の1つのクラス値よりも具体的ではありません。.Entry aa.button
  • に追加のセレクターを定義し.buttonます。
    たとえば.button, a.button、最初のセレクターが失敗した場所を2番目のセレクターが引き継ぐように使用できます。inputまたはタグなどの他のタグで同じ問題が発生すると、これが非常に厄介になる可能性があることに注意してくださいbutton。
  • を使用し!importantます。一部のスタイルをオーバーライドする必要
    のあるクラスを作成しようとすると問題が発生するため、これは絶対に行わないでください.big-button.button

特異性についてもっと知りたい場合は、それが何であるか、そしてそれがどのように計算されるかについての良い記事があります。

于 2012-08-07T10:29:17.300 に答える
1

CSS3では、次のことができます。

.Entry a:not(.button)

.Entry aこれにより、ルールが。を含む要素に影響を与えることが制限されます.button。

CSS3がオプションでない場合（つまり、IE <= 8をサポートする必要がある場合）、継承されている不注意なスタイルを上書きする必要があります。したがって、たとえば、ボタンがからの不要な境界線で終わっている場合は、ルールで.Entry aこれを上書きします。.button

.button { border: none; /* more button styles */ }
于 2012-08-07T10:18:01.693 に答える
1

.buttonで定義されているクラスのスタイルを上書きできます.Entry a

たとえば、テキストに下線を付けたくない場合は、次のように使用できます。text-decoration: none

.Entry a{
    color: black;
    text-decoration: underline;
}

a.button {
    background: black;
    color: white;
    text-decoration: none;
    /*And some other Styling*/
}

};また、cssで中括弧の後にセミコロンを使用しないでください。ブレースを使用して閉じるだけです}

于 2012-08-07T10:19:26.753 に答える
0

最も簡単なのは、要素がのスタイルから継承する特定のスタイルを「元に戻す」ことです.Entry a。たとえば、テキスト装飾スタイルを元に戻すには、を使用できますtext-decoration:none。

新しいブラウザでのみ機能する必要がある場合は、@ Jonが言及したnot（）セレクターを使用できます。

于 2012-08-07T10:18:53.390 に答える