Est-il possible, à part ce que je fais parce que ça ne marche pas, de faire ça? Je veux pouvoir avoir des sous-classes qui sont sous une classe pour utiliser le CSS spécifiquement pour cette classe.
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>
Pour que je puisse simplement utiliser class = "item" pour les éléments sous la classe parent css "area1", "area2". Je sais que je peux utiliser class = "area1 item" pour que cela fonctionne, mais je ne comprends pas pourquoi il doit être si verbeux à ce sujet. La sous-classe css ne devrait-elle pas regarder sous quelle classe parent elle se trouve pour la définir?
Remarque: cela fonctionne dans IE (en utilisant 7 pour le moment), mais pas dans FF, donc je suppose que ce n'est pas une manière standard CSS de faire quelque chose.
Pour info, lorsque vous définissez une règle comme vous l'avez fait ci-dessus, avec deux sélecteurs enchaînés:
Ça veut dire:
Tel que:
Malheureusement, cela ne fonctionne pas dans IE6, mais c'est ce que cela signifie.
la source
Votre problème semble être un espace manquant entre vos deux classes dans le CSS:
Devrait être
la source
voulez-vous forcer uniquement les enfants à être sélectionnés? http://css.maxdesign.com.au/selectutorial/selectors_child.htm
la source
Mettez simplement un espace entre .area1 et .item, par exemple:
ce style s'applique aux éléments avec élément de classe à l'intérieur d'un élément avec classe area1.
la source
Mettez juste un espace entre vos cours
Voici une très bonne référence pour les sélecteurs CSS .
la source
Suite à la réponse de kR105 ci-dessus:
Mon problème était similaire à celui de l'OP (affiche originale), ne se produisait qu'en dehors d'une table, donc les sous-classes n'étaient pas appelées à partir de la portée de la classe parente (la table), mais en dehors de celle-ci, j'ai donc dû ajouter des sélecteurs , comme mentionné kR105.
Voici le problème: j'avais deux boîtes (divs), chacune avec le même rayon de bordure (HTML5), padding et marge, mais j'avais besoin de leur donner des couleurs différentes. Plutôt que de répéter ces 3 paramètres pour chaque classe de couleur, je voulais qu'une "superclasse" contienne border-radius / padding / margin, puis juste des "sous-classes" individuelles pour exprimer leurs différences (guillemets doubles autour de chacune car ce ne sont pas vraiment des sous-classes - voir mon post plus tard). Voici comment cela a fonctionné:
HTML:
CSS:
J'espère que quelqu'un trouvera cela utile.
la source
C'est la colonne vertébrale du CSS, la "cascade" des feuilles de style en cascade.
Si vous écrivez vos règles CSS sur une seule ligne, il est plus facile de voir la structure:
L'utilisation de plusieurs classes est également une bonne utilisation intermédiaire / avancée de CSS, malheureusement il existe un bogue IE6 bien connu qui limite cette utilisation lors de l'écriture de code cross browser:
IE6 IGNORE le premier sélecteur dans une règle multi-classes, donc IE6 applique réellement la règle .area1.larger comme
Cela signifie qu'il affectera TOUS les éléments .larger.
C'est un bogue très méchant et malheureux (l'un des nombreux) dans IE6 qui vous oblige à ne jamais utiliser cette fonctionnalité de CSS si vous voulez un fichier CSS propre à tous les navigateurs.
La solution consiste alors à utiliser des préfixes de nom de classe CSS pour éviter toute collision avec des noms de classe génériques:
Vous pouvez également utiliser une seule classe, mais de cette façon, vous pouvez conserver le CSS dans la logique souhaitée, tout en sachant que .area1Larger n'affecte que .area1, etc.
la source
La classe que vous appliquez sur le div peut être utilisée comme point de référence pour styliser des éléments avec ce div, par exemple.
Pour être super sémantique, vous devez déplacer la classe sur la table.
la source
vous pouvez également avoir deux classes dans un élément comme celui-ci
<div class = "item1 item2 item3"></div>
chaque élément de la classe est sa propre classe
la source
kR105 a écrit:
la bordure et le texte de la boîte seraient bleus, car le style de .box2 attribue ces valeurs.
Également dans mon article précédent, j'aurais dû souligner que l' ajout de sélecteurs comme je l'ai fait n'est pas la même chose que la création d'une sous - classe dans une classe (la première solution de ce fil), bien que l'effet soit similaire.
la source