Is het mogelijk, anders dan wat ik aan het doen ben omdat het niet lijkt te werken, om dit te doen? Ik wil subclasses hebben die onder een klasse staan om de CSS specifiek voor die klasse te gebruiken.
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>
zodat ik gewoon klasse = “item” kan gebruiken voor de elementen onder de ouder CSS-klasse “Area1”, “Area2”. Ik weet dat ik Class = “Area1 Item ‘kan gebruiken om dit aan het werk te krijgen, maar ik begrijp niet waarom het er zo uitgebreid over moet zijn. Moet de CSS-subklasse niet kijken naar welke ouderklasse het is om het te definiëren?
OPMERKING: Dit werkt in IE (meteen met 7), maar in FF doet het dat niet, dus ik neem aan dat dit geen CSS-standaard manier is om iets te doen.
Antwoord 1, Autoriteit 100%
hoeft alleen maar een spatie toe te voegen:
.area2 .item
{
...
}
Antwoord 2, Autoriteit 40%
FYI, wanneer u een regel definieert zoals u hierboven hebt gedaan, met twee selectors aan elkaar geketend:
.area1.item
{
color:red;
}
Het betekent:
Pas deze stijl toe op elk element dat zowel de klasse “area1” als “item” heeft.
Zoals:
<div class="area1 item">
Helaas werkt het niet in IE6, maar dat is wat het betekent.
Antwoord 3, autoriteit 15%
Uw probleem lijkt een ontbrekende spatie te zijn tussen uw twee klassen in de CSS:
.area1.item
{
color:red;
}
Zou moeten zijn
.area1 .item
{
color:red;
}
Antwoord 4, autoriteit 7%
wil je dwingen om alleen kinderen te selecteren? 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;
}
Antwoord 5, autoriteit 5%
Plaats een spatie tussen .area1 en .item, bijvoorbeeld:
.area1 .item
{
color:red;
}
deze stijl is van toepassing op elementen met class item binnen een element met class area1.
Antwoord 6, autoriteit 4%
Zet een spatie tussen je lessen
.area1 .item
{
...
}
Hier is een zeer goede referentie voor CSS Selectors .
Antwoord 7, Autoriteit 3%
Volgen vanaf het antwoord van KR105 hierboven:
Mijn probleem was vergelijkbaar met die van de OP (originele poster), alleen voorgedaan buiten een tafel, dus de subklassen werden niet gebeld vanuit de reikwijdte van de ouderklasse (de tabel), maar daarbuiten, dus ik had om selectors toe te voegen, zoals genoemd Kr105.
Hier was het probleem: ik had twee dozen (DIV’s), elk met dezelfde rand-radius (HTML5), opvulling en marge, maar nodig om ze verschillende kleuren te maken. In plaats van die 3 parameters voor elke kleurklasse te herhalen, wilde ik een “superclass” om grensradius / opvulling / marge te bevatten, dan alleen individuele “subclasses” om hun verschillen uit te drukken (dubbele citaten rond elk als ze niet echt subclasses zijn – zie mijn latere post). Dit is hoe het uitwerkt:
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}
Ik hoop dat iemand dit nuttig vindt.
Antwoord 8, Autoriteit 2%
Dat is de ruggengraat van CSS, de “Cascade” in Cascading Style Sheets.
Als u uw CSS-regels in een enkele regel schrijft, maakt het het gemakkelijker om de structuur te zien:
.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }
Het gebruik van meerdere klassen is ook een goed intermediair/geavanceerd gebruik van CSS, helaas is er een bekende IE6-bug die dit gebruik bij het schrijven van cross-browsercode beperkt:
<div class="area1 larger"> .... </div>
.area1 { width:200px; }
.area1.larger { width:300px; }
IE6 NEGEERTde eerste selector in een regel met meerdere klassen, dus IE6 past de regel .area1.larger toe als
/*.area1*/.larger { ... }
Dit betekent dat het ALLE .grotere elementen beïnvloedt.
Het is een erg vervelende en ongelukkige bug (een van de vele) in IE6 die je dwingt om die functie van CSS vrijwel nooit te gebruiken als je één schoon CSS-bestand voor meerdere browsers wilt.
De oplossing is dan om CSS-klassenaamvoorvoegsels te gebruiken om botsingen met generieke klassenamen te voorkomen:
.area1 { ... }
.area1.area1Larger { ... }
.area2.area2Larger { ... }
Je kunt net zo goed maar één klasse gebruiken, maar op die manier kun je de CSS in de logica houden die je bedoeld hebt, terwijl je weet dat .area1Larger alleen van invloed is op .area1, enz.
Antwoord 9
De klasse die u op de div toepast, kan bijvoorbeeld worden gebruikt als referentiepunt om elementen met die div te stylen.
<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 */
Om super semantisch te zijn, moet u de klasse naar de tabel verplaatsen.
<table class="area1">
<tr>
<td>Text Text Text</td>
<td>Text Text Text</td>
</tr>
</table>
Antwoord 10
U kunt ook twee klassen in een element zoals deze hebben
<div class = "item1 item2 item3"></div>
Elk item in de klas is zijn eigen klasse
.item1 {
background-color:black;
}
.item2 {
background-color:green;
}
.item3 {
background-color:orange;
}
Antwoord 11
KR105 schreef:
U kunt ook twee klassen in een element zoals deze hebben
<div class = "item1 item2 item3"></div
Ik kan de waarde hiervan niet zien, aangezien het beginsel van cascadingstijlen, de laatste heeft voorrang. Als ik bijvoorbeeld in mijn eerder voorbeeld de HTML heb gewijzigd om te lezen
<div class="box1 box2"> Hello what is my color? </div>
De rand en tekst van de box zou blauw zijn, aangezien de stijl van de doos2 deze waarden wijst.
Ook in mijn eerdere post had ik benadrukt dat selectors als ik deed niet hetzelfde is als het maken van een subklasse binnen een klasse (de eerste oplossing in deze thread ), Hoewel het effect vergelijkbaar is.