CSS-Klassen und Unterklassen

Question

Ist es möglich, anders als was ich tue, weil es nicht zu funktionieren scheint, dies zu tun? Ich möchte in der Lage sein, Unterklassen zu haben, die unter einer Klasse sind, um das CSS spezifisch für diese Klasse zu verwenden.

CSS

.area1 
{ 
    border:1px solid black; 
} 
.area1.item 
{ 
    color:red; 
} 
.area2 
{ 
    border:1px solid blue; 
} 
.area2.item 
{ 
    color:blue; 
} 

HTML

<div class="area1"> 
    <table> 
     <tr> 
      <td class="item">Text Text Text</td> 
      <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 
<div class="area2"> 
    <table> 
     <tr> 
      <td class="item">Text Text Text</td> 
      <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 

Damit ich nur class = "Punkt" für die Elemente unter der übergeordneten CSS-Klasse "area1", "area2" verwenden kann. Ich weiß, dass ich class = "area1 item" verwenden kann, um das zum Laufen zu bringen, aber ich verstehe nicht, warum es so wortreich sein muss. Sollte die CSS-Unterklasse nicht darauf schauen, welcher Elternklasse sie angehört, um sie zu definieren?

Hinweis: Dies funktioniert im IE (mit 7 gerade jetzt), aber in FF ist es nicht, also nehme ich an, das ist kein CSS-Standard Weg, etwas zu tun.

Answer 1

brauchen nur einen Raum hinzuzufügen:

.area2 .item 
{ 
    ... 
} 

Answer 2

Ihr Problem scheint in der CSS ein fehlender Raum zwischen den zwei Klassen zu sein:

.area1.item 
{ 
    color:red; 
} 

sein sollten

.area1 .item 
{ 
    color:red; 
} 

Answer 3

Setzen Sie einfach ein Leerzeichen zwischen .area1 und .item, zB:

.area1 .item 
{ 
    color:red; 
} 

Dieser Stil wird auf Elemente mit Klassenelementen in einem Element mit Klasse Area1 angewendet.

Answer 4

Möchten Sie nur Kinder erzwingen? http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1 
{ 
     border:1px solid black; 
} 
.area1>.item 
{ 
    color:red; 
} 
.area2 
{ 
    border:1px solid blue; 
} 
.area2>.item 
{ 
    color:blue; 
} 

Answer 5

Einfach einen Raum zwischen den Klassen

.area1 .item 
{ 
    ... 
} 

Hier ist eine sehr gute Referenz für CSS Selectors.

Answer 6

FYI, wenn Sie eine Regel definieren, wie Sie oben haben, mit zwei miteinander verkettet Selektoren:

.area1.item 
{ 
    color:red; 
} 

Es bedeutet:

diesen Stil gelten für jedes Element, das sowohl die Klasse hat " Bereich1 "und" Element ".

Wie zum Beispiel:

<div class="area1 item"> 

Leider ist es nicht in IE6 arbeiten, aber das ist, was es bedeutet.

Answer 7

Sie auch zwei Klassen innerhalb eines Elements wie diese

<div class = "item1 item2 item3"></div>

jedes Element in der Klasse haben kann, ist seine eigene Klasse

.item1 { 
    background-color:black; 
} 

.item2 { 
    background-color:green; 
} 

.item3 { 
    background-color:orange; 
} 

Answer 8

, die das Rückgrat von CSS ist, die „Kaskade "in Cascading Stylesheets.

Wenn Sie Ihre CSS-Regeln in einer einzigen Zeile schreiben es macht es leichter, die Struktur zu sehen:

.area1 .item { color:red; } 
.area2 .item { color:blue; } 
.area2 .item span { font-weight:bold; } 

mehrere Klassen ist auch eine gute Mittelstufe/Fortgeschrittene Verwendung von CSS, leider gibt es eine gut bekannte IE6 Bug, der diese Verwendung begrenzt, wenn Cross-Browser-Code zu schreiben:

<div class="area1 larger"> .... </div> 

.area1 { width:200px; } 
.area1.larger { width:300px; } 

IE6 IGNORIERT die ersten Wähler in einer Multi-Class-Regel, so IE6 gilt tatsächlich die .area1.larger Regel als

/*.area1*/.larger { ... } 

Das bedeutet, dass es ALLE .larger Elemente betrifft.

Es ist ein sehr böser und unglücklicher Bug (einer von vielen) in IE6, der Sie dazu zwingt, dieses Feature von CSS praktisch nie zu verwenden, wenn Sie eine saubere browserübergreifende CSS-Datei benötigen.

Die Lösung wird dann CSS Klassennamen Präfixe verwenden wiht generische Klassennamen zu kollidieren:

.area1 { ... } 
.area1.area1Larger { ... } 

.area2.area2Larger { ... } 

und Mai nur eine Klasse verwenden, aber auf diese Weise Sie die CSS in der Logik halten können Sie bestimmt, während wissend dass .area1Larger nur .area1 usw. betrifft.

Answer 9

Die Klasse, die Sie auf das div anwenden, kann als Bezugspunkt für Stilelemente mit diesem div verwendet werden.

<div class="area1"> 
    <table> 
     <tr> 
       <td class="item">Text Text Text</td> 
       <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 


.area1 { border:1px solid black; } 

.area1 td { color:red; } /* This will effect any TD within .area1 */ 

Um super semantisch zu sein, sollten Sie die Klasse auf den Tisch verschieben.

<table class="area1"> 
     <tr> 
       <td>Text Text Text</td> 
       <td>Text Text Text</td> 
     </tr> 
    </table> 

Answer 10

Im Anschluss an KR105 Antwort oben:

Mein Problem auf, dass der OP ähnlich war (Original Poster), trat nur außerhalb einer Tabelle, so wurden die Subklassen nicht im Rahmen der der angerufene Elternklasse (die Tabelle), aber außerhalb davon, also musste ich Selektoren hinzufügen, wie kR105 erwähnt.

Hier war das Problem: Ich hatte zwei Boxen (divs), jede mit dem gleichen Rand-Radius (HTML5), Polsterung und Rand, aber benötigt, um sie verschiedenen Farben zu machen. Anstatt diese 3 Parameter für jede Farbklasse zu wiederholen, wollte ich, dass eine "superclass" border-radius/padding/margin enthält, dann nur einzelne "subclasses", um ihre Unterschiede auszudrücken (doppelte Anführungszeichen, da sie keine Unterklassen sind). siehe meinen späteren Beitrag).Hier ist, wie es funktioniert:

HTML:

<body> 
    <div class="box box1"> Hello my color is RED </div> 
    <div class="box box2"> Hello my color is BLUE </div> 
</body> 

CSS:

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px} 
div.box1 {border:3px solid red; color:red} 
div.box2 {border:3px solid blue; color:blue} 

Hoffnung jemand findet diese Informationen hilfreich.

Answer 11

KR105 schrieb:

Sie auch zwei Klassen innerhalb eines Elements wie dieser wird der Wert dieser, da durch das Prinzip der

<div class = "item1 item2 item3"></div 

Ich kann nicht

sehen haben Kaskadierungsstile, der letzte hat Vorrang. Wenn zum Beispiel in meinem früheren Beispiel, das ich den HTML-Code geändert

<div class="box1 box2"> Hello what is my color? </div> 

den Rand des Box und Text wäre blau zu lesen, da .box2 Stil diese Werte zuweist.

Auch in meinem früheren Post Ich hätte betont, dass Zugabe Selektoren, wie ich eine Unterklasse innerhalb einer Klasse (die erste Lösung in diesem Thread), wie die Schaffung nicht das gleiche tat, obwohl der Effekt ähnlich ist.