एक एंकर टैग

Question

के अंदर एक अवधि स्टाइल करना मैं इसे सुंदर दिखने की कोशिश कर रहा हूं, लेकिन मैंने एक समस्या में भाग लिया है। मेरे पास एंकर टैग के अंदर उपशीर्षक या संक्षिप्त वर्णन वाला एक अवधि तत्व है। दुर्भाग्य से यह एंकर के समान ही स्टाइल है, जो यह नहीं है कि मैं इसे कैसे बनना चाहता हूं। मैंने अपने आप को अवधि के लिए स्टाइल लगाने की कोशिश की है लेकिन उन्हें एंकर शैलियों द्वारा ओवरराइड किया जाता है। समस्या यह है कि जब मैं लिंक को ढंकता हूं तो मैं इसे रेखांकित नहीं करना चाहता हूं।

यहां मेरा एचटीएमएल है।

 <ul> 
      <li><a href="#">A <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">B <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">C <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">D <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">E <span class="subTitle">Subtitle</span></a></li> 
     </ul> 

और मेरे सीएसएस

#leftNav ul li { position: relative; } 
#leftNav ul li a span.subTitle 
{ 
    bottom:   4px; 
    color:   #000000; 
    display:   block; 
    font-size:  12px; 
    left:   10px; 
    position:  absolute; 
    text-decoration: none; 
} 

मैं अवधि में ही है, जो कोई असर दिखाई नहीं देता स्टाइल की कोशिश की है। ली के सापेक्ष एंकर के बाहर की अवधि रखकर या तो काम नहीं करता है। अवधि एंकर की होवर घटना को अवरुद्ध करती है और यह क्लिक करने योग्य नहीं है।

Answer 1

अपने नमूना कोड का एक परीक्षण (इसके चारों ओर आईडी के साथ एक उपयुक्त div में जोड़ने) ठीक से काम करने लगता है:

http://jsfiddle.net/44ndf/1/

इसकी डिफ़ॉल्ट स्टाइल निश्चित रूप से हो जाएगा एंकर के समान ही आपको संभावित रूप से चीजों को सामान्य रूप से ओवरराइड करने की आवश्यकता होगी। आपको अपनी समस्या कहां निलंबित करने में सक्षम होने के लिए एक कामकाजी (या अधिक सटीक रूप से काम नहीं कर रहा) नमूना प्रदान करना होगा।

अंत में हालांकि बातों की जांच करने के लिए शामिल हैं:

1) अपने चयनकर्ताओं निश्चित रूप से सही तत्वों ओर इशारा करते हैं कि (ऊपर में मैं चयनकर्ता यह लेने बनाने के लिए आईडी "leftNav" के साथ एक div शामिल करने के लिए किया था जैसे ऊपर

2) कि आप निश्चित रूप से विरोधाभासी शैलियों नहीं हैं - संभवतः उच्च प्राथमिकता या संभवतः कुछ के साथ कुछ! इसे ओवरराइड करना महत्वपूर्ण है।

3) फायरबग का उपयोग यह देखने के लिए करें कि कौन सी शैलियों को लागू किया जा रहा है, जिससे सीएसएस चयनकर्ता यह पहचानने के लिए कि आपकी समस्याएं कहां हैं।

संपादित करें:

रेखांकन के मामले में ऐसा लगता है कि यह असंभव है (या कम से कम कोई रास्ता नहीं मैं पाया है) एक स्टाइल ओवरराइड करने के लिए। इस मार्कअप के साथ

http://jsfiddle.net/44ndf/2/

<a href="#"><span>A </span><span class="subTitle">Subtitle</span></a> 

आप शैलियों के रूप में इस सेट कर सकते हैं:: तो बजाय मैं थोड़ा के आसपास मार्कअप बदल

#leftNav ul li a span.subTitle 
{ 
    text-decoration: none; 
} 

#leftNav ul li a span 
{ 
text-decoration: underline; 
} 

#leftNav ul li a 
{ 
text-decoration: none; 
} 

यह मूलतः लंगर बताता है रेखांकन के लिए नहीं। सभी स्पैन अंडरलाइन हैं और फिर आपके उपशीर्षक को रेखांकित नहीं किया जाता है। आपको स्पष्ट रूप से यह सुनिश्चित करने की आवश्यकता होगी कि रेखांकित करना चाहते हैं कि हर जगह एक अवधि में है (किसी भी अवधि में कुछ भी रेखांकित नहीं किया जाएगा)।

क्या इसके लायक यह मेरे लिए एक ब्राउज़र बग की तरह दिखता है के बाद से आईई अच्छी तरह से व्यवहार करने के लिए लगता है के लिए - http://jsfiddle.net/44ndf/5/ IE पर उपशीर्षक पर कोई रेखांकन है, लेकिन फ़ायरफ़ॉक्स पर करता है। मुझे संदेह है कि एंकरों के अंडरलाइनों को ओवरराइड नहीं किया जा रहा है।

Answer 2

यह सुनिश्चित नहीं है कि समस्या क्या है क्योंकि मैं नहीं देख सकता कि स्टाइल एंकर टैग क्या है, लेकिन आप हमेशा सीएसएस नियम के बाद !important आज़मा सकते हैं। कुछ इस तरह:

#leftNav ul li a span.subTitle 
{ 
    bottom:   4px; 
    display:   block; 
    font-size:  12px !important; 
    left:   10px; 
    position:  absolute; 
}