Les sélecteurs CSS appliqués aux éléments indépendants?

Question

J'ai une page simple avec deux tables appelé table-a et table-b:

<table id="table-a"> 
    ... 
</table> 

<table id="table-b"> 
    ... 
</table> 

et j'utilise le CSS suivant de style l'apparence de ces 2 tables:

#table-a { 
    width: 100%; 
} 

#table-a td, tr, th { 
    border: 1px solid #000000; 
} 

#table-b { 
    width: 100%; 
} 

#table-b td, tr, th { 
    border: 1px solid #000000; 
    padding-left: 5px; 
} 

Le problème est que le padding-left: 5px; de table-b est également appliquée à la première table table-a.

Comment cela se produit-il et comment puis-je l'empêcher?

Je ne peux vraiment pas comprendre comment résoudre ce problème: (...

Je pensais qu'en utilisant ce qui suit, seuls les éléments sont influencés qui sont « dans » table-b et non ceux au sein table-a: ..

#table-b td, tr, th { 
    /* ... */ 
} 

Toute aide est appréciée

Answer 1

Votre second sélecteur #table-b td, tr, th {...] sélectionne tous les td, et tr ths dans le document que vous devez préfixer le sélecteur de table à chacun:

#table-b td, 
#table-b tr, 
#table-b th {...] 

Ajoutez également le préfixe #table-a aux autres sélecteurs.

Answer 2

...tr, th { 
    border: 1px solid #000000; 
    padding-left: 5px; 
} 

Cela vaut pour toutes les lignes de table et en-têtes.

Si vous souhaitez appliquer les règles de table # a, vous devez spécifier l'ID de table avant la tr et th:

#table-a td, #table-a tr, #table-a th { 
    border: 1px solid #000000; 
    padding-left: 5px; 
} 

Answer 3

Essayez ceci: #table-b td, #table-b tr, #table-b th au lieu de ce #table-b td, tr, th. Votre version applique les sélecteurs à # table-t t ET ET tr