2011-02-12 18 views
5

मैं शीर्ष सूची आइटम पर लागू करने के लिए एक सीएसएस शैली प्राप्त करने का प्रयास कर रहा हूं लेकिन वांछित फैशन में आवेदन करने के नियम नहीं प्राप्त कर सकता। नीचे दिए गए उदाहरण में मैं पहले li आइटम के लिए शीर्ष सीमा को हटाने का प्रयास कर रहा हूं। यह काम करता है अगर मैं स्थान पर style="border-top: none;" इनलाइन डालता हूं MenuTopItem तत्व लेकिन मुझे इसे स्टाइल ब्लॉक के साथ करने की आवश्यकता है।सीएसएस नियम पहली सूची आइटम

#locationMenu li#locationMenuTopItem ब्लॉक को ओवरराल करने का ब्लॉक क्यों है?

<html> 
<head> 
<style> 
#locationMenu li { 
    border-top: 1px solid #e1e1e1;  
} 

#locationMenuTopItem { 
    border-top: none; 
} 
</style> 
</head> 
<body> 
<ul id="locationMenu"> 
    <li id="locationMenuTopItem"><a href="#">Top Menu</a> 
     <ul> 
      <li><a href="#">Sub Menu 1</a></li> 
      <li><a href="#">Sub Menu 2</a></li> 
      <li><a href="#">Sub Menu 3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Top Menu 2</a></li> 
    <li><a href="#">Top Menu 3</a></li> 
    </ul> 
</body> 

उत्तर

1
CSS specificity की वजह से

- चयनकर्ता #locationMenu li अधिक विशिष्ट #locationMenuTopItem से है। #locationMenu #locationMenuTopItem का उपयोग करना यहां काम करेगा। http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

+0

लिंक के लिए Thx। यह इसे मंजूरी दे दी। मैंने पूछने से पहले डब्ल्यू 3 सी लिंक पढ़ा था, लेकिन इसे समझने के लिए दिन में बहुत देर हो चुकी थी। – sipwiz

13

क्यों "#locationMenu ली" ब्लॉक #locationMenuTopItem ब्लॉक overruling है:

यहाँ मदद मिलेगी कि एंडी क्लार्क से एक ग्राफिकल मार्गदर्शिका दी गई है?

यह अधिक specific

#locationMenu > li:first-child 

अतिरिक्त आईडी जोड़े बिना काम करना चाहिए है। (हालांकि IE6 में नहीं)

5

यह एक संभावित जवाब हो सकता है:

#locationMenu li, 
#locationMenu li:first-child ul li 
{ 
    border-top: 1px solid #e1e1e1;  
} 

#locationMenu li:first-child 
{ 
    border-top:none; 
} 

यह क्योंकि #locationMenu ली अकेले #locationMenuTopItem से अधिक गहरा है, overrulie है। एक पंक्ति में अधिक बयान, यह गहरा है।

संबंधित मुद्दे