تطبيق النمط على المستوى الأول فقط من علامات TD

Question

هل هناك طريقة لتطبيق نمط الفصل على مستوى واحد فقط من علامات TD؟

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

Answer 1

هل هناك طريقة لتطبيق نمط الفصل على مستوى واحد فقط من علامات TD؟

نعم^*:

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

ولكن! ال '>"المحدد المباشر للطفل لا يعمل في IE6. إذا كنت بحاجة إلى دعم هذا المتصفح (الذي ربما تفعله ، للأسف) ، كل ما يمكنك فعله هو تحديد العنصر الداخلي بشكل منفصل وإلغاء تعيين النمط:

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

---

^*لاحظ أن المثال الأول يشير إلى أ tbody عنصر غير موجود في HTML الخاص بك. هو - هي ينبغي لقد كانت في HTML الخاصة بك ، ولكن المتصفحات على ما يرام بشكل عام مع تركها ... إنها تضيفها خلف الكواليس.

Answer 2

ماذا عن استخدام CSS: الطبقة الزائفة الأولى:

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

Answer 3

هذا الموديل:

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

يعطيني:

هذا http://img12.imageshack.us/img12/4477/borders.png

ومع ذلك ، فإن استخدام الفصل هو النهج الصحيح هنا.

Answer 4

فقط اصنع محددًا للجداول داخل myClass.

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

(للتطبيق بشكل عام على جميع الجداول الداخلية ، يمكنك أيضًا القيام بذلك table table td.)

Answer 5

كنت أرغب في ضبط عرض العمود الأول من الجدول ، ووجدت أن هذا يعمل (في FF7) - العمود الأول يبلغ عرضه 50 بكسل:

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

حيث كان ترميز بلدي

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

Answer 6

أعتقد أنه سيعمل.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

Answer 7

أعتقد أنك يمكن أن تحاول

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

أو

body table tr td { color: red; }

حيث "الجسم" هو محدد لوالد طاولتك

لكن الفصول الدراسية هي على الأرجح الطريقة الصحيحة للذهاب إلى هنا.