Warum element-style-override-Klasse, die auf element?

Unser problem ist wie folgt.
Wir haben Stück code wie dieser.

<div class="parent">
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 1</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 2</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 3</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 4</a>
    </div>
    <div class="clear">
    </div>
</div>

Das ist alles im globalen container mit der Klasse .content.

CSS-code:

.content a
{
    font-size: 11px;
}

.parent a
{
    font-size: 16px;
}

Aus irgendeinem Grund, anstelle der Anwendung .parent a Browser anwenden .content a.

Was ist falsch und wie kommen container CSS angewendet wird, anstatt näher .parent-CSS?

  • Sie sollten .parent a da es die gleiche Spezifität, zuletzt definierte, und überschreibt jede Eigenschaft in .content a. Es sieht aus wie Sie Sie erstellt haben, kann ein reduzierter test Fall, dass reduziert wurde entfernt der Fehler.
  • betrachten wir ein Szenario, in dem Eltern-und Kind-beide haben eine eigene Charakteristik. Kind kann Erben-Eigenschaft vom übergeordneten Element sowie kann Ihren eigenen Immobilie. wenn Kind und Eltern teilen sich die selben Eigenschaft als Kind Eigentum Vorrang.
  • Passiert das nur in manchen Browsern? Hast du firebug, ein browser-plugin für firefox, die erklärt, wie und warum wurde das CSS angewendet?
  • Ich habe das Problem in Chrome, FF und IE (7,8). Es sieht aus wie .parent a wird nicht angewendet
InformationsquelleAutor EnterSB | 2011-09-30
  1. 6

    Beide Regeln die gleiche Spezifität, also welche Regel kommt zuletzt in den Stylesheets wird gewinnen... Sind Sie sicher, dass die .parent a-Regel angegeben ist nach die .content a-Regel?

    Anderen Weg, es zu lösen wären, um die Spezifität leicht, ich.e:


    .parent .child_item {
    font-size: 16px;
    }

    Bearbeiten: Sie können spielen, um mit dem test hier: http://jsfiddle.net/gburw/
    Um meinen Standpunkt zu beweisen, versuchen Sie, die Umstellung der CSS-Deklarationen und Sie werden sehen, dass je nachdem welche Regel definiert ist, die Letzte "gewinnt".

    Edit 2: Sie können Lesen Sie mehr über CSS-Spezifität hier. Es ist ein ziemlich einfaches Konzept zu begreifen, der schwierige Teil ist die Vermeidung Spezifität Kriege mit anderen Entwicklern =) Also Sie sollte kommen mit einem standard, wie Sie schreiben, CSS in Ihrem Unternehmen. Nach den Richtlinien des Pagespeed und YSlow ist auch immer eine gute Idee.

    • Regel .parent a ist die zweite in der Datei. So wie ich das verstehe sollte es angewendet werden. Ich habe auch versucht mit der Lösung, die Sie vorgeschlagen, aber es funktioniert immer noch nicht.
    • Hi, ich Lesen Sie über die CSS-Spezifität, und es half. Sie hatten Recht, nachdem alle. Es können beide verwendet werden, Ihre Lösung und .parent a Lösung. Ich weiß immer noch nicht, warum die Browser nicht anzeigen möchten, wie wir es einrichten.
    InformationsquelleAutor PatrikAkerstrand
  2. 1

    Oder wenn Sie wirklich wollen .parent a angewendet werden. Sie können dies tun:

    .parent a{
   font-size:16px !important;
}

    dass es mehr Gewicht als .content a unabhängig davon, welche erklärt wurde letzten.

    • In der Regel nicht eine gute Idee, wenn Sie es vermeiden können
    • Mit !wichtig ist eine schreckliche Praxis. Es lässt sich (fast) immer vermieden werden, und führt IMMER zu einer Besonderheit wars. "Na gut... X denkt, er ist so clever. Ich werde doppelt wichtig, dass meine Regel und werfen in ein paar ID-Selektoren, um nur für eine gute Maßnahme! Nehmen, die, ganz wichtige Regel!"
    • Es nervt, dass jeder einzelne Spezifität Frage muss beantwortet werden, mit einem obligatorischen "verwenden !important". Die harte Realität.
    InformationsquelleAutor rgin
  3. 0

    Klingt wie ein Problem der CSS-Spezifität. Stellen Sie sicher, dass Ihr CSS-Selektoren sind eigentlich: 

    .content a
{
    font-size: 11px;
}

.parent a
{
    font-size: 16px;
}

    und nicht etwas wie #container .content a. Sie könnte auch eine Erhöhung der Spezifität der .parent a zu .parent .child a wenn das nicht der Fall ist.

    InformationsquelleAutor Wex
Schreibe einen Kommentar