2017-11-02 5 views
-2

Ich untersuche eine CSS-Datei eines Drittanbieters, und ich stoße auf die gleiche Klasse, die die gleiche Eigenschaft mehrmals gesetzt hat, aber jedes Mal mit anderen Werten. Ich kann mir nicht vorstellen, warum das so ist. Könnte jemand bitte etwas Licht in dieses Thema bringen?Warum widersprüchliche Eigenschaften für dieselbe Klasse?

Beispiel unten:

.tabulator .tabulator-header .tabulator-col { 
    display: inline-block; 
    position: relative; 
    box-sizing: border-box; 
    border-right: 1px solid #aaa; 
    background: #e6e6e6; 
    text-align: left; 
    vertical-align: bottom; 
    overflow: hidden; 
} 

.tabulator .tabulator-row .tabulator-cell { 
    display: inline-block; 
    position: relative; 
    box-sizing: border-box; 
    padding: 4px; 
    border-right: 1px solid #aaa; 
    vertical-align: middle; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
+0

Ich verstehe Ihre Frage nicht, diese Klassen haben unterschiedliche Namen, sie haben eindeutig unterschiedliche Zwecke. Meinst du, warum werden sie auf dem gleichen Element verwendet? Wenn das so klingt, hört sich das nur nach einer schlechten Verwendung von HTML/CSS an. –

+0

@TomOakley die Tabulator-Klasse ist die, auf die ich mich beziehe. – Abs

+2

Zum einen zielen diese Regeln auf ** verschiedene ** Elemente ab. Diese Regeln setzen die Eigenschaften für '.tabulator' ** überhaupt nicht **. Ich würde vorschlagen, dass Sie ein erstes Mal darüber lesen, wie Selektoren aufgebaut sind. –

Antwort

2

.tabulator .tabulator-header .tabulator-col{} - bedeutet, dass diese CSS-Einstellungen mit der Klasse zu jedem beliebigen HTML-Elemente angewandt werden .tabulator-col die tabulator-header innerhalb eines Elements ist, und das ist innerhalb eines Elements tabulator

So Nach Ihrer Frage sind die beiden Stile unterschiedlich.

und hier ist die Dokumentation für Selektoren https://www.w3schools.com/cssref/css_selectors.asp

wenn zwei Wähler haben die gleiche Spezifität, die letzte erklärt gewinnt zu sein.

+0

Wenn das das Problem ist, sollte diese Frage eher geschlossen als beantwortet werden. Aber wir sind nicht sicher, ob das das Problem ist. Vielleicht hat das OP einfach versehentlich das falsche CSS eingefügt. –

+0

Danke, ich bin noch neu in CSS, also war mir nicht bewusst, dass Selektoren auf diese Weise verwendet werden. – Abs

+1

@MrLister Warum sollte es geschlossen werden? Liegt es daran, dass die Frage das Problem falsch identifiziert hat? – Abs

Verwandte Themen