html - सीएसएस के साथ एक तालिका में पहले 'tr' को छोड़कर सभी 'tr' तत्वों का चयन करें





css html-table css-selectors (9)


जब आप सीएसएस द्वारा चुने गए अपने सभी भविष्य को परिभाषित करते हैं (या नहीं चाहते हैं) तो आप कक्षा बना सकते हैं और कक्षा का उपयोग कर सकते हैं।

यह लिखकर किया जाएगा

<tr class="unselected">

और उसके बाद आपके सीएसएस में लाइनें हैं (और उदाहरण के रूप में टेक्स्ट-एलाइन कमांड का उपयोग करके):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}

सीएसएस के साथ तालिका में पहली tr को छोड़कर मैं सभी tr तत्वों का चयन कैसे कर सकता हूं?

मैंने इस विधि का उपयोग करने की कोशिश की लेकिन पाया कि यह काम नहीं करता है:

http://www.daniel-lemire.com/blog/archives/2008/08/22/how-to-select-even-or-odd-rows-in-a-table-using-css-3/




पहले tr या बाद के tr कक्षा जोड़कर। अकेले सीएसएस के साथ जो पंक्तियां आप चाहते हैं उन्हें चुनने का कोई क्रॉसब्रोसर तरीका नहीं है।

हालांकि, अगर आपको इंटरनेट एक्सप्लोरर 6, 7 या 8 की परवाह नहीं है:

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



यद्यपि प्रश्न का पहले से ही एक सभ्य उत्तर है, मैं सिर्फ यह कहना चाहता हूं कि :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;
}

यही है, क्योंकि input एस बच्चे हैं, आप चयनकर्ता के इनपुट हिस्से पर first-child को रखेंगे।




आप अपने सीएसएस में एक छद्म श्रेणी चयनकर्ता का भी उपयोग कर सकते हैं:

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

वह क्लास को डीडीसी के साथ पहले तत्व में लागू नहीं करेगा।

उदाहरण के साथ जेएसफ़िल्ड यहां है: http://jsfiddle.net/YYTFT/ , और छद्म श्रेणी चयनकर्ताओं को समझाने के लिए यह एक अच्छा स्रोत है: http://css-tricks.com/pseudo-class-selectors/




मुझे आश्चर्य है कि किसी ने भाई संयोजकों के उपयोग का उल्लेख नहीं किया है, जो आईई 7 द्वारा समर्थित हैं और बाद में:

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

वे दोनों ठीक उसी तरह काम करते हैं (वैसे भी HTML टेबल के संदर्भ में):

tr:not(:first-child)



क्षमा करें, मुझे पता है कि यह पुराना है, लेकिन पहले सभी को छोड़कर सभी टी तत्वों को स्टाइल क्यों न करें और psuedo वर्ग का उपयोग करें: पहला बच्चा जहां आप सभी ट्र तत्वों के लिए निर्दिष्ट करते हैं।

इस उदाहरण से बेहतर हताश:

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

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

/ पैट्रिक




आदर्श समाधान लेकिन आईई में समर्थित नहीं है

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

दूसरा समाधान सभी टीआर को स्टाइल करना होगा और फिर पहले बच्चे के लिए सीएसएस के साथ ओवरराइड करना होगा:

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



चूंकि tr:not(:first-child) आईई 6, 7, 8 द्वारा समर्थित नहीं है। आप jQuery की मदद का उपयोग कर सकते हैं। आप इसे here पा सकते हैं




मुझे इसके साथ कुछ परेशानी हो रही थी, और "एक्स: नहीं (): नहीं ()" विधि मेरे लिए काम नहीं कर रही थी।

मैं इस रणनीति का सहारा ले गया:

INPUT {
    /* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* styles that reset previous styles */
}

यह लगभग मजेदार नहीं है, लेकिन यह मेरे लिए काम करता है जब: नहीं () पागल हो रहा था। यह आदर्श नहीं है, लेकिन यह ठोस है।







html css html-table css-selectors