2012-05-17 21 views
8

स्टैक ओवरव्लो के लिए धन्यवाद, अंततः मुझे अपना ईमेल लिंक स्टाइल करने का एक तरीका मिला, लेकिन मुझे आश्चर्य है कि यह यहां दिए गए समाधान के बिना क्यों काम नहीं करता है।स्टाइलिंग ईमेल लिंक/href = "mailto:" सीएसएस

चूंकि लिंक विशेषता वर्ग "के बारे में" अवधि के साथ अवधि का हिस्सा है, जिसमें फ़ॉन्ट आकार और शैली परिभाषित है, क्या ईमेल लिंक 11px और sans serif में दिखाई नहीं देना चाहिए?

और

a[href^="mailto:"] 

{ 
    font-family: sans-serif; 
    color: black; 
    font-size: 11px; 
} 

महान, जैसे ही काम करता है, जबकि के रूप में मैं

.about a[href^="mailto:"] 

{ 
    font-family: sans-serif; 
    color: black; 
    font-size: 11px; 
} 

में इसे बदलने के लिए के रूप में यह भी अपेक्षा की जाती है कि यह काम नहीं करता प्रयास करें।

टैग्स स्पैन स्वरूपण या कक्षा घोंसले को नहीं सुनते हैं?

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 

html { 
    height:100%; 
} 

body { 
    height: 100%; 
    margin-left: 20px; 
    margin-top:0px; 
} 

.bottom-left { 

    position: absolute; 
    font:sans-serif; 
    bottom: 15px; 
    left: 15px; 
} 


.bold { 
    font-family: serif; 
} 


.about { 
    font-size: 11px; 
    font-family: sans-serif; 
} 


/*a[href^="mailto:"] 

{ 
    font-family: sans-serif; 
    color: black; 
    font-size: 11px; 
}*/ 



.address { 
font-size: 11px; 
border-bottom: 1px grey dotted; 
} 




</style> 

<title>TEMP</title> 

</head> 
<body> 


<div class="bottom-left"> 
     <span class="about"> 
      <span class="bold">XYZ</span> is a project space .&nbsp;&nbsp;&#124;&nbsp; 
      <span="address">Website Information</span> &mdash; <a href="mailto:[email protected]">[email protected]</a> 
     </span> 
</div> 



</body> 
</html> 

उत्तर

20

हाय वास्तव में आप अपने ईमेल लिंक सीएसएस टिप्पणी की है: -

तो अब सीएसएस इस विधि की तरह अपने काम कर ठीक ......

a[href^="mailto:"] 
{ 
    font-family: sans-serif; 
    color: red; 
    font-size: 11px; 
} 

डेमो देखने के बारे में: - http://jsbin.com/ijofoq/edit#html,live

UPDATED

अब अपनी कार्यशील ठीक ... अपने HTML संपादित करें और अपने HTML

<div class="bottom-left"> 
    <div class="about"> 
     <span class="bold">XYZ</span> is a project space .&nbsp;&nbsp;&#124;&nbsp; 
     <span="address">Website Information</span> &mdash; <a href="mailto:[email protected]">[email protected]</a> 
    </div> 

में जोड़ने के मूल रूप से आप से अवधि टैग निकालना होगा। के बारे में कक्षा।

जांच इस: - http://jsbin.com/ijofoq/2/edit

+0

THX शैलेंद्र! मुझे पता है कि यह इस तरह से काम करता है, मैं यह पूछ रहा था कि यह इस समाधान के बिना क्यों काम नहीं कर रहा था और क्यों एक href तत्व को .about कक्षा में घोंसला नहीं दिया जा सकता है। – Roland

+1

मुझे एक बग की तरह दिखता है कि यह 'div' के साथ काम करता है और' span' –

+0

धन्यवाद नहीं! यह जानना अच्छा है कि यह मेरी त्रुटि नहीं है: पी – Roland

1

मुझे लगता है कि a से अधिक .about प्राथमिकता दी जाती है। सीएफ। Css Rule Specificity

मूल रूप से, एक सीएसएस नियम-सेट इस तरह एक संस्करण संख्या की तरह एक प्राथमिकता असाइन है:

{#id}.{#class}.{#element}.{order} 

साथ
  • {#ID}: आईडी चयनकर्ताओं की गिनती
  • {} #class : कक्षाओं, छद्म वर्गों, गुण
  • {#element}: तत्वों की गिनती, छद्म तत्व
  • {order}:

    1. 0.2.1: सभी फाइलों को

भर में इस नियम के सूचकांक तो, हमने निम्न आदेश दिया है।*.about a[href^="mailto:"](0 आईडी, 1 वर्ग + 1 attr, 1 तत्व)

  • 0.1.1.aspan.about(0 आईडी, 1 वर्ग, 1 तत्व)
  • 0.1.1.ba[href^="mailto:"](0 आईडी, 1 attr, 1 तत्व)
  • 0.1.0। *.about(0 आईडी, 1 वर्ग, 0 तत्व)
  • +०१२३५१६४१०६१

    span.about और a[href^="mailto:"] में समान विनिर्देश (1 वर्ग या विशेषता, और 1 तत्व) है, इसलिए आदेश महत्वपूर्ण है, अंतिम जीत।

    यदि आप span हटाते हैं तो नियम कम विशिष्ट और ढीला है।

    (इसके अलावा, नियमों सीधे एक तत्व के लिए आवेदन किया है, और दूसरे माता पिता तत्वों से inhertited के बीच अंतर ...)

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