2009-07-09 7 views

Répondre

7

#table1 td {...}

La livre signifie que ce qui suit est un identifiant, dans votre cas table1. le td qui suit signifie que "tout td qui est un descendant de # table1". Here is a pretty good tutorial.

EDIT: pour le sélecteur plus efficace d'utiliser #table1 > tr > td {...}

+0

Merci, George. Pour référence future, disons que je veux contrôler chaque td que j'ai dans un tableau. Est-ce que je donnerais un identifiant à chaque td? Si oui, à quoi ressemblerait le CSS? J'apprécie l'aide! – bmw0128

+0

vous devriez donner à chaque TD un ID unique si vous voulez les styliser différemment, ou donner à chaque TD une classe si vous avez des groupes de TD qui auront le même style, mais différent des autres classes. – Jason

4

Si vous essayez d'être aussi précis que possible:

#div1 #table1 tr td { 

} 

Sinon, vous pourriez sortir avec

#table1 tr td { 

} 

ou même

#table1 td { 

} 

Le plus tard deux sera le style de tout élément avec l'id « table1 » (pas seulement un élément avec l'id « table1 » à l'intérieur d'un élément avec l'id « div1 »

+0

# div1 # table1 est redondant, car il ne peut y avoir qu'une seule table avec l'ID donné. En fait, vous obligez le navigateur à prendre plus de temps avec le sélecteur inefficace. – geowa4

+1

@georgeiv - cela suppose un HTML valide, bien sûr :) – Jason

-2
#div1 #table1 td 
{ 
    ... 
} 

EDIT: Correction - Je lis trop vite - j'utilise habituellement la classe à la place de l'ID, donc j'ai utilisé. par habitude.

+0

"avec les identifiants de table1 et div1". '.' est pour les noms de classe – geowa4

+0

d'accord avec George – marcgg

+0

Je devrais apprendre à lire mieux je suppose. – McAden

2

En supposant html:

<div id="div1"> 
    <table id="table1"> 
    ... 
    </table> 
</div> 

Utilisez CSS:

#div1 #table1 td { 
    ... 
} 

qui vous permettra de coiffer les cellules.

1
#div1 #table1 td{ } 

parce

# = ID 

. = class 

nothing = tag 

À mon avis une meilleure façon de le faire serait ...

#div1 table td{ } 
<div id="div1"><table></table></div> 

Vous avez vraiment pas besoin de créer un nouvel identifiant pour la table. Cela dépend si vous avez plus d'une table dans votre div et si les tables vont être différentes, mais à partir de votre question, je dirais que ce serait mieux.

1

Si les ID sont table1 et div1, vous utilisez le signe # pour indiquer qu'un "élément" est utilisé (# div1, # table1). Si vous les avez marqués comme classes, utilisez un point (.div1, .table1). Les identifiants doivent être utilisés une fois par page, les classes peuvent être réutilisées encore et encore. Dans ce cas, tout ce que vous pourriez avoir besoin est #table1 td { }

1

Tout ces éléments fonctionnera:

#table1 tr td{ 

} 
#div1 #table1 tr td{ 

} 
#table1 td{ 

} 
#div1 tr td{ 

} 
#div1 table td{ 

} 

Vous utilisez des espaces pour séparer les tags.

1

ou bien, si votre table est générée par un script côté serveur, vous pouvez également ajouter des classes CSS explicitement aux lignes de la table comme

<table...> 
    <tbody> 
    <tr class="odd"> 
     <td>..</td> 
     <td>..</td> 
    </tr> 
    <tr class="even"> 
     <td>..</td> 
     <td>..</td> 
    </tr> 
    </tbody> 
</table> 
0

Cela dépend de la précision que vous voulez être. CSS signifie Cascading Style Sheets (Feuilles de style en cascade), donc les règles suivantes tomberont en cascade vers le plus spécifique de haut en bas:

/* all td in the page */ 
td { color: '#aaaaaa' } 

/* all td in table with id table1 */ 
#table1 td { color: '#bbbbbb' } 

/* all td in a div that contains this table with this id */ 
div #table1 td { color: '#cccccc' } 

/* all td in this specific div that contains this specific table */ 
#div1 #table1 td { color: '#dddddd' } 
Questions connexes