पहले नहीं टीआर और पिछले नहीं टीडी

Question

सीएसएस

#MyTable tr+tr:hover { 
     background: #dfdfdf; 
} 

एचटीएमएल

<table id="myTable"> 
    <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>X</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>4</td> 
     <td>X</td> 
    </tr> 
</table> 

चयन करने के लिए कैसे मैं पंक्ति 2 और 3 मंडराना करने में कामयाब रहे, लेकिन जब 2 और 3, कैसे पर मंडराना क्या मैं टीडी (एक्स) छोड़ सकता हूं। JQuery चयनकर्ता का उपयोग नहीं कर रहे पसंदीदा।

Answer 1

:not(), :first-child और :last-child का उपयोग करें।

#myTable tr:not(:first-child):hover td:not(:last-child) { 
     background: #dfdfdf; 
} 

यह भी देखें this example।

Answer 2

यदि आप पहले और अंतिम बच्चों को कुछ लागू नहीं करना चाहते हैं, तो आप शैलियों को ओवरराइड करने के लिए :first-child और :last-child चयनकर्ताओं का उपयोग कर सकते हैं।

#MyTable tr, tr:hover { 
    background: #dfdfdf; 
} 

#MyTable tr:first-child, tr:last-child { 
    background: #000; 
} 

यह IE 9 though तक IE में काम नहीं करेगा।

Unless you shim in some support।

Answer 3

:not(:first-child) और :not(:last-child) चाल करना चाहिए, ऐसा लगता है कि वे सभी नवीनतम ब्राउज़र द्वारा समर्थित हैं। आप IE < 9 समर्थन आप कक्षाओं में जोड़ सकते हैं, या मैं इस अतः लिंक मिल गया क्योंकि मैं अपने शीर्ष लेख पंक्ति हाइलाइट करने के लिए जब मैं इस पर hovered नहीं करना चाहता था रों

Answer 4

'th साथ s' की जगह td की जरूरत है। जिस समाधान के साथ मैं आया था वह <thead> और <tbody> टैग का उपयोग करना था और <tbody> के भीतर पंक्तियों पर सीएसएस लागू करना था।

<style> 
    .report tbody tr:hover { 
     background-color: khaki; 
    } 
</style> 

<table class="report"> 
    <thead> 
     <tr> 
      <th>Header</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Value</td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td>Total</td> 
     </tr> 
    </tfoot> 
</table>