Wie Farbe in der ersten td in meiner Tabelle ändern Klasse mit

Question

ich diese Tabelle CSS haben:

table.show-my-request-table { 
    border: 1px solid black; 
    margin-left:auto; 
    margin-right:auto; 
    border-collapse: collapse; 
} 
tr.show-my-request-table-header{ 
    border: 1px solid black; 
} 
tr.show-my-request-table{ 
    border: 1px solid black; 
} 
tr.show-my-request-table:hover{ 
    background-color: #D3D3D3; 
} 

Und Tabelle HTML:

<table class="show-my-request-table center"> 
    <tr class="show-my-request-table-header"> 
     <th>Date</th> 
     <th>Priority</th> 
     <th>Question</th> 
    </tr> 
    <tr > 
     <td class="show-my-request-table">        11.8.2016 15:27:13 
     </td> 
     <td> 
      <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon"> 
     </td> 
     <td> 
     </td> 
    </tr> 

    <tr > 
     <td class="show-my-request-table"> 
      11.8.2016 14:45:41 
     </td> 
     <td> 
      <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon"> 
     </td> 
     <td> 
      Jak se máš? 
     </td> 
    </tr> 
</table> 

Ich möchte einen roten Hintergrund für die erste td einrichten Etikett.

Mein Problem ist, dass ich nicht weiß, wie es für nur einen Tisch zu tun ist.

Wenn ich versuche:

td:first-child { 
    background-color: #ff0000; 
} 

es für alle Tabellen funktioniert.

Ich denke, dass dieser Code gut, aber nicht funktioniert:

table.show-my-request-table > td:first-child { 
    background-color: #ff0000; 
} 

Warum? Wie kann ich das machen?

Answer 1

Versuchen Sie folgendes:

table.show-my-request-table tr > td:first-child { 
    background-color: #ff0000; 
} 

Answer 2

Sie brauchen nicht > (immediate Kinder Wähler) zu verwenden, nur ein space

setzen

Versuchen Sie folgendes:

table.show-my-request-table td:first-child { 
    background-color: #ff0000; 
} 

Answer 3

Sie müssen nur Ziel das Element in der Tabelle

Versuchen Sie diese

table.show-my-request-table tr td:first-child { 
    background-color: #ff0000; 
} 

Hier ist ein Code Stift http://codepen.io/anon/pen/LkrmqK

Prost und glücklich Codierung.

Answer 4

table.show-my-request-table > td:nth-child(1) { 
    background: #25a3c2; 
} 

Answer 5

/* grab 2nd row, then color the first cell */ 
tr:nth-child(2) td:first-child { 
    background-color: #ff0000; 
} 

es in Aktion unter

table.show-my-request-table { 
 
    border: 1px solid black; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-collapse: collapse; 
 
} 
 
tr.show-my-request-table-header { 
 
    border: 1px solid black; 
 
} 
 
tr.show-my-request-table { 
 
    border: 1px solid black; 
 
} 
 
tr.show-my-request-table:hover { 
 
    background-color: #D3D3D3; 
 
} 
 
/* grab 2nd row, then color the first cell */ 
 

 
tr:nth-child(2) td:first-child { 
 
    background-color: #ff0000; 
 
}

<table class="show-my-request-table center"> 
 
    <tr class="show-my-request-table-header"> 
 
    <th>Date</th> 
 
    <th>Priority</th> 
 
    <th>Question</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="show-my-request-table"> 
 

 
     11.8.2016 15:27:13 
 

 
    </td> 
 
    <td> 
 
     <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon"> 
 
    </td> 
 
    <td> 
 

 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="show-my-request-table"> 
 

 
     11.8.2016 14:45:41 
 

 
    </td> 
 
    <td> 
 
     <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon"> 
 
    </td> 
 
    <td> 
 
     Jak se máš? 
 
    </td> 
 
    </tr>

Answer 6

table.show-my-request-table > td:first-child { 
    background-color: #ff0000; 
} 

Dieser Selektor ein td th Ziel versucht an ist ein direkt Kind des table Elements. Wie Sie Ihre eigenen Code zeigt:

<table class="show-my-request-table center"> 
    <!-- snip --> 
    <tr > 
     <td class="show-my-request-table"> 

Es gibt (und muss sein) ein tr Element zwischen ihnen. Aber das ist noch nicht alles: Der HTML-Parser fügt auch automatisch ein tbody-Element als übergeordnetes Element für die tr ein (außer Sie haben explizit ein <thead> oder <tbody>-Tag eingefügt).Das <tbody> Tag ist in HTML optional, aber das Element ist nicht, also fügt der Parser das Element einfach hinzu, wenn das Tag fehlt.

Die Lösung zu verwenden, ist die descendant selector:

table.show-my-request-table td:first-child { 
    background-color: #ff0000; 
} 

ein scharfer Beobachter wird feststellen, dass der Kombinator > durch einen (space) Kombinator ersetzt.