เลือก 'tr' ทั้งหมดยกเว้นอันแรก

ฉันจะเลือกtrองค์ประกอบทั้งหมดยกเว้นสิ่งแรกtrในตารางด้วย CSS ได้อย่างไร

ฉันลองใช้วิธีนี้แต่พบว่าใช้ไม่ได้

โดยการเพิ่มคลาสให้กับคลาสแรกtrหรือรายการถัดtrไป ไม่มี crossbrowser ในการเลือกแถวที่คุณต้องการด้วย CSS เพียงอย่างเดียว

อย่างไรก็ตามหากคุณไม่สนใจ Internet Explorer 6, 7 หรือ 8:

tr:not(:first-child) {
    color: red;
}

ฉันประหลาดใจที่ไม่มีใครพูดถึงการใช้ combinators พี่น้องซึ่งได้รับการสนับสนุนโดย IE7 และใหม่กว่า:

tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */

ทั้งคู่ทำงานในลักษณะเดียวกัน (ในบริบทของตาราง HTML ต่อไป) เป็น:

tr:not(:first-child)

ทางออกที่ดี แต่ไม่รองรับใน IE

tr:not(:first-child) {css}

วิธีที่สองจะเป็นลักษณะของ tr ทั้งหมดแล้วแทนที่ด้วย css สำหรับลูกคนแรก:

tr {css}
tr:first-child {override css above}

เสียงเหมือน 'บรรทัดแรก' ที่คุณพูดถึงคือส่วนหัวของตาราง - ดังนั้นคุณควรนึกถึงการใช้งานtheadและtbodyในมาร์กอัปของคุณ ( คลิกที่นี่ ) ซึ่งจะส่งผลให้มาร์กอัป 'ดีกว่า' (ถูกต้องทางความหมาย ) และง่ายขึ้นเป็นไปได้ข้ามเบราว์เซอร์ที่เป็นมิตรสำหรับการเลือก CSS ( table thead ... { ... })

แม้ว่าคำถามจะมีคำตอบที่ดีอยู่แล้ว แต่ฉันก็อยากจะย้ำว่า :first-childแท็กไปที่ประเภทรายการที่แสดงถึงเด็ก ๆ

ตัวอย่างเช่นในรหัส:

<div id"someDiv">
     <input id="someInput1" /> 
     <input id="someInput2" />
     <input id="someInput2" />
</div

หากคุณต้องการส่งผลกระทบเพียงสององค์ประกอบที่สองที่มีระยะขอบ แต่ไม่ใช่องค์ประกอบแรกคุณจะทำ:

#someDiv > input {
     margin-top: 20px;
}
#someDiv > input:first-child{
     margin-top: 0px;
}

นั่นคือเนื่องจากinputs เป็นเด็กคุณจะวางfirst-childในส่วนอินพุตของตัวเลือก

ขออภัยฉันรู้ว่านี่เก่า แต่ทำไมไม่ออกแบบองค์ประกอบ tr ทั้งหมดตามที่คุณต้องการทั้งหมดยกเว้นคลาสแรกและคลาส psuedo: ลูกคนแรกที่คุณเพิกถอนสิ่งที่คุณระบุสำหรับองค์ประกอบ tr ทั้งหมด

descriped ที่ดีขึ้นโดยตัวอย่างนี้:

http://jsfiddle.net/DWTr7/1/

tr {
    border-top: 1px solid;
}
tr:first-child {
    border-top: none;   
}

/ พาทริค

เนื่องจากtr:not(:first-child)IE 6, 7, 8 ไม่รองรับคุณสามารถใช้ jQuery ได้ คุณสามารถค้นหาได้ที่นี่

ตัวเลือกอื่น:

tr:nth-child(n + 2) {
    /* properties */
}

อาจเป็นคนที่ได้รับประโยชน์ด้านล่างคือสิ่งที่ฉันใช้

ol li:not(:first-child) {
    background: black;
    color: white;
}

คุณสามารถใช้ตัวเลือกคลาสหลอกใน CSS ของคุณเช่นนี้:

.desc:not(:first-child) {
    display: none;
}

ที่จะไม่ใช้คลาสกับองค์ประกอบแรกกับ class .desc

นี่คือตัวอย่างของ JSFiddle: http://jsfiddle.net/YYTFT/และนี่เป็นแหล่งที่ดีในการอธิบายตัวเลือกคลาส pseudo: http://css-tricks.com/pseudo-class-selectors/

คุณสามารถสร้างคลาสและใช้คลาสเมื่อคุณกำหนดอนาคตทั้งหมดที่คุณต้องการ (หรือไม่ต้องการ) ให้เลือกโดย CSS

นี้จะทำได้โดยการเขียน

<tr class="unselected">

จากนั้นใน css ของคุณมีบรรทัด (และใช้คำสั่ง text-align เป็นตัวอย่าง):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}