TD etiketlerinin yalnızca ilk düzeyine stil uygulama

136

Td etiketlerinin yalnızca BİR düzeyine bir Sınıf stili uygulamanın bir yolu var mı?

<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
kaynak

221

Td etiketlerinin yalnızca BİR düzeyine bir Sınıf stili uygulamanın bir yolu var mı?

Evet ^* :

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

Fakat! ' >' Doğrudan çocuk seçici IE6'da çalışmaz. Bu tarayıcıyı desteklemeniz gerekiyorsa (muhtemelen yaptığınız, ne yazık ki), tek yapabileceğiniz tek şey iç elemanı ayrı ayrı seçmek ve stili ayarlamaktır:

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

^* İlk örneğin tbodyHTML'nizde bulunmayan bir öğeye başvurduğunu unutmayın. Bu olmalıdır HTML'nize olmuştur, ama tarayıcılar onlar sadece perde arkasında bunu ekleyin ... genelde dışarı bırakarak ile ok.

— bobince
kaynak

1

i6 için hata ayıklamak zorunda kaldım bir dünya hatırlamak için ürperti. Bu yazı ürperti ..

— webfish

35

CSS kullanmaya ne dersiniz: birinci çocuk sözde sınıfı:

.MyClass td:first-child { border: solid 1px red; }

— aviko oloo
kaynak

16

Bu işe yaramaz. Bu td, ağaçlarındaki .MyClassilk unsurlarını oluşturan çocuk ağacındaki tüm çocukları seçer ve böylece iç kısmı da şekillendirir td.

— Lazlo

1

bunun nasıl bu kadar çok oyu var? :first-childkesinlikle OP'nin aradığı etkiye sahip olmayacak.

— plong0

8

Bu tarz:

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

bana verir:

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

Ancak burada bir sınıf kullanmak muhtemelen doğru yaklaşımdır.

— Nick Presta
kaynak

Her bir td öğesinde bir sınıf kullanmak biraz gereksiz olabilir, muhtemelen içeren tablo öğesinde bir sınıf kullanırsınız ve yine de ikinci tablo düzeylerini hariç tutmanız gerekir - yani ilk örneğiniz doğrudur.

— thomasrutter

6

Bir MyClass içindeki tablolar için bir seçici yapın.

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

(Genel olarak tüm iç tablolara uygulamak için de yapabilirsiniz table table td.)

— atmak
kaynak

3

Tablonun ilk sütunun genişliğini ayarlamak istedim ve bunun işe yaradığını buldum (FF7'de) - ilk sütun 50 piksel genişliğinde:

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

işaretlememin olduğu yer

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

— prule
kaynak

3

Bence işe yarayacak.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

— uma
kaynak

Birincisi tdher satırın ilkini tdmi , ikincisi sadece sayfanın ilkini mi seçer ?

— Joshua Pinter

@JoshuaPinter ilkinde haklısın. Genel olarak, üst öğesinin altındaki ilk öğe olan td:first-childherhangi bir tdöğeyi seçer (üst öğesi ne olursa olsun). Birincisi tr td:first-child, tdaynı zamanda a'nın altına yerleştirilmesi şartı ekler tr(herhangi bir düzeyde, doğrudan yönlendirici olması gerekmez). doğrudan a'nın altındaki ilk öğe olan tr > td:first-childa'yı seçer . Sonuçta OP'nin sorusuna bir çözümle ilgisi yoktur ve bu cevap yanlıştır. tdtr:first-child

— plong0

2

Sanırım deneyebilirsin

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

Veya

body table tr td { color: red; }

'gövde' tablonuzun üst öğesi için bir seçicidir

Ancak sınıflar büyük olasılıkla buraya gitmek için doğru yoldur.

— Simon Buchan
kaynak