Wenden Sie den Stil nur auf die erste Ebene der td-Tags an

136

Gibt es eine Möglichkeit, den Stil einer Klasse nur auf EINE Ebene von td-Tags anzuwenden?

<style>.MyClass td {border: solid 1px red;}</style>

<table class="MyClass">
  <tr>
    <td>
      THIS SHOULD HAVE RED BORDERS
    </td>
    <td>
      THIS SHOULD HAVE RED BORDERS
      <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
    </td>
  </tr>
</table>
css css-selectors RichC
quelle

Antworten:

221

Gibt es eine Möglichkeit, den Stil einer Klasse nur auf EINE Ebene von td-Tags anzuwenden?

Ja * :

.MyClass>tbody>tr>td { border: solid 1px red; }

Aber! Der ' >' Direct-Child-Selektor funktioniert in IE6 nicht. Wenn Sie diesen Browser unterstützen müssen (was Sie wahrscheinlich leider tun), können Sie das innere Element nur separat auswählen und den Stil deaktivieren:

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

* Beachten Sie, dass das erste Beispiel auf ein tbodyElement verweist, das in Ihrem HTML nicht gefunden wurde. Es sollte in Ihrem HTML-Code enthalten sein, aber Browser können es im Allgemeinen weglassen ... sie fügen es einfach hinter den Kulissen hinzu.

Bobince
quelle
1
Ich schaudere, wenn ich mich an eine Welt erinnere, in der wir für IE6 debuggen mussten. Dieser Beitrag brachte Schüttelfrost zurück ..
Webfish
35

Wie wäre es mit der CSS: First-Child-Pseudoklasse:

.MyClass td:first-child { border: solid 1px red; }
Aviko Oloo
quelle
16
Das wird nicht funktionieren. Dies wählt alle tdKinder im Kinderbaum aus, .MyClassderen erstes Element sie enthalten, und formatiert somit auch das Innere td.
Lazlo
1
Wie hat das so viele positive Stimmen? :first-childwird definitiv nicht den Effekt haben, den OP sucht.
plong0
8

Dieser Stil:

table tr td { border: 1px solid red; }
td table tr td { border: none; }

gibt mir:

diese http://img12.imageshack.us/img12/4477/borders.png

Die Verwendung einer Klasse ist hier jedoch wahrscheinlich der richtige Ansatz.

Nick Presta
quelle
Die Verwendung einer Klasse für jedes einzelne td-Element ist möglicherweise etwas redundant. Sie würden wahrscheinlich eine Klasse für das enthaltene Tabellenelement verwenden und dann immer noch zweite Tabellenebenen ausschließen müssen - dh Ihr erstes Beispiel ist korrekt.
Thomasrutter
6

Erstellen Sie einfach eine Auswahl für Tabellen in einer MyClass.

.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}

(Um generisch auf alle inneren Tabellen anzuwenden, können Sie dies auch tun table table td.)

Futter
quelle
3

Ich wollte die Breite der ersten Spalte der Tabelle festlegen und fand, dass dies funktioniert (in FF7) - die erste Spalte ist 50 Pixel breit:

#MyTable>thead>tr>th:first-child { width:50px;}

wo mein Markup war

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>
prule
quelle
3

Ich denke, es wird funktionieren.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }
uma
quelle
Wählt der erste den ersten tdjeder Zeile und der zweite nur den ersten tdder Seite aus?
Joshua Pinter
@JoshuaPinter Sie sind im Grunde richtig über die erste. td:first-childWählt im Allgemeinen jedes tdElement aus, das das erste Element unter seinem übergeordneten Element ist (unabhängig davon, was sein übergeordnetes Element ist). Der erste tr td:first-childfügt die Bedingung hinzu, dass der tdauch unter a verschachtelt sein muss tr(auf jeder Ebene, nicht unbedingt direkter Nachkomme). tr > td:first-childwählt a aus td, das das erste Element direkt unter a ist tr. Hat also letztendlich :first-childnichts mit einer Lösung der OP-Frage zu tun und diese Antwort ist falsch.
plong0
2

Ich denke du könntest es versuchen

table tr td { color: red; }
table tr td table tr td { color: black; }

Oder

body table tr td { color: red; }

Dabei ist 'body' ein Selektor für das übergeordnete Element Ihrer Tabelle

Aber der Unterricht ist höchstwahrscheinlich der richtige Weg, um hierher zu kommen.

Simon Buchan
quelle