web-dev-qa-db-fra.com

Virgule en CSS, plusieurs sélecteurs utilisant le même CSS

.Resource table.Tbl td
{ /* some css*/ }

.Resource table.Tbl td.num
{ /* some css 2*/ }

.Resource table.Tbl td.num span.icon
{ /* some css 3*/ }

.Resource table.Tbl2 td
{ /* some css*/ }

.Resource table.Tbl2 td.num
{ /* some css 2*/ }

.Resource table.Tbl2 td.num span.icon
{ /* some css 3*/ }

où le CSS pour Tbl et Tbl2 doit être le même.

.Resource table.Tbl, table.Tbl2 td { /* some css*/ }

ne fonctionne pas.

Comment puis-je y parvenir sans dupliquer toute la ligne?

csscss-selectors
25
nothrow
.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css*/ }

Vous devez ajouter le chemin complet des ancêtres pour les deux règles. Pas seulement là où vous voyez des différences.

48
Alin Purcaru
.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css */ }

Vous devez dupliquer les éléments avant et après table.TblX, car il n'y a aucun moyen de regrouper les , pour avoir une priorité plus élevée que le sélecteur descendant .

10
kennytm

Vous ne pouvez pas (enfin pas sur tous les navigateurs, lisez la suite).

Chaque sélecteur est malheureusement indépendant.

C'est l'un des problèmes ennuyeux de CSS .

Il y a :any() , qui peut faire ce que vous voulez, mais la prise en charge du navigateur est limitée.

Vous pouvez le faire comme vous le souhaitez et le pré-traiter avec un langage côté serveur, de sorte qu'il génère des sélecteurs indépendants.

LESS est populaire.

5
alex