विशिष्ट ली क्लास

Question

पर सीएसएस लागू करना मुझे मेरी सूची में कोई समस्या है।

मैं प्रत्येक li तत्व के लिए कुछ रंग निर्दिष्ट करना चाहता हूं लेकिन ऐसा नहीं कर सकता। यह उन सभी के लिए यह करता रहता है।

#sub-nav-container ul 
{ 
    position: absolute; 
    top: 96px; 
    left: 594px; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

#sub-nav-container li 
{ 
    margin: 0; 
} 

#sub-nav-container a 
{ 
    display: block; 
    text-decoration: none; 
    border-bottom: none; 
    color: #C1C1C1; 
    display: inline;   
} 

li.sub-navigation-home-news 
{ 
    color: #C1C1C1; 
    font-family: Arial; 
    font-size: 13.5px; 
    text-align: center; 
    text-transform: uppercase; 
    padding: 0px 90px 0px 0px; 
} 

यहाँ एचटीएमएल

<div id="sub-nav-container"> 
    <ul id="sub-navigation-home"> 
     <li class="sub-navigation-home-news"><a href="#">News</a></li> 
     <li class="sub-navigation-home-careers"><a href="#">Careers</a></li> 
     <li class="sub-navigation-home-client"><a href="#">Client Login</a></li> 
     <li class="sub-navigation-home-canada"><a href="#">CANADA</a></li> 
     <li class="sub-navigation-home-usa"><a href="#">USA</a></li> 
    </ul> 
</div> 

Answer 1

उन्हें और अधिक परिभाषित करें अपने सीएसएस फ़ाइल में है:

यहाँ मेरी सीएसएस है।

li.sub-navigation-home-news 

के बजाय कोशिश

#sub-navigation-home li.sub-navigation-home-news 

इस चेक अधिक जानकारी के लिए: http://www.w3.org/TR/CSS2/cascade.html#cascade

Answer 2

मेरा मानना ​​है कि यह क्योंकि #ID शैलियों ट्रम्प .class शैलियों एक तत्व के अंतिम शैली की गणना करते समय है। इस तरह id को class से अपने li बदलकर देखें, या आप जोड़ने की कोशिश कर सकते हैं अपने वर्ग के लिए महत्वपूर्ण है,:

li.sub-navigation-home-news 
{ 
    color: #C1C1C1; !important 

Answer 3

मैं केवल एक रंग निर्दिष्ट किया जा रहा (यद्यपि आप दो में यह निर्दिष्ट देखना अलग-अलग जगहें।) या तो आपने अपने कुछ स्टाइल नियमों को छोड़ दिया है, या आपने बस एक और रंग निर्दिष्ट नहीं किया है।

Answer 4

सीएसएस आपने रंग 0 सी 1 सी 1 सी 1 को सभी <a> तत्वों पर लागू किया है।

और यह रंग 0 सी 1 सी 1 सी 1 को पहले <li> तत्व पर भी लागू करता है।

शायद आपके द्वारा पोस्ट किया गया कोड कुछ खो रहा है क्योंकि मुझे कोई अन्य रंग परिभाषित नहीं किया जा रहा है।

Answer 5

<a> वहाँ में और आईडी का उपयोग नहीं कर आप शीर्ष

बदलें यह करने के लिए आगे एक सा प्रयोग करते हैं जो की वजह से है कि:

#sub-navigation-home li.sub-navigation-home-news a 
{ 
color: #C1C1C1; 
font-family: arial; 
font-size: 13.5px; 
text-align: center; 
text-transform:uppercase; 
padding: 0px 90px 0px 0px; 
} 

और यह propably काम करेंगे

Answer 6

#sub-nav-container a के साथ a तत्वों के लिए आप color: #C1C1C1; को परिभाषित कर रहे हैं।

li.sub-navigation-home-news में इसे फिर से करना कुछ भी नहीं करेगा, क्योंकि यह a तत्व का अभिभावक है।

Answer 7

आपने ली तत्वों के लिए अलग-अलग रंग निर्दिष्ट किए हैं लेकिन इसे ली के भीतर निर्दिष्ट रंग से ओवरराइड किया जा रहा है। रंग निकालें: # सी 1 सी 1 सी 1; एक तत्व से शैली और यह काम करना चाहिए।