Comma en CSS, sélecteurs multiples utilisant le même CSS

Question

.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 devrait être le même.

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

ne fonctionne pas.

Comment est-ce que je peux réaliser ceci, sans dupliquer la ligne entière?

Answer 1

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

Vous devez ajouter le chemin d'accès complet aux deux règles. Pas seulement là où vous voyez des différences.

Answer 2

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

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

Answer 3

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

Chaque sélecteur est indépendant, malheureusement. Il s'agit de l'un des CSS's annoying issues.

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 une langue côté serveur, de sorte qu'il génère des sélecteurs indépendants.

LESS est populaire.

Answer 4

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

vous y êtes presque. Je pense que vous voulez dire

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

note la td supplémentaire - vous devez spécifier le « chemin » complet à chaque élément.

Les pré-processeurs CSS tels que LessCSS offrent des constructions syntaxiques qui facilitent le traitement des structures répétitives.