web-dev-qa-db-ja.com

CSSでのメールリンク/ href = "mailto："のスタイル

StackOverflowのおかげで、ついにメールリンクのスタイルを設定する方法を見つけましたが、ここで見つけた解決策なしになぜ機能しないのでしょうか。

リンクは、フォントサイズとスタイルが定義されている属性クラス "about"のスパンの一部なので、電子メールリンクは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>
cssemailhrefmailto
15
Roland

こんにちは、あなたはあなたのメールリンクcssにコメントしました：-

だから今、このメソッドのようにCSSを書いて、うまくいきます......

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

デモを見てください：- http://jsbin.com/ijofoq/edit#html,live

[〜＃〜]更新[〜＃〜]

これで問題なく動作します... 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>

基本的には、spanタグを。aboutクラスから削除する必要があります。

これを確認してください：- http://jsbin.com/ijofoq/2/edit

24
Shailender Arora

おもう .aboutはaよりも優先されます。 cf. Cssルールの特定性 。

基本的に、CSSルールセットには、次のようなバージョン番号のような優先順位が割り当てられます。

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

と

  • {#id}：IDセレクターの数
  • {#class}：クラス、疑似クラス、属性の数
  • {#element}：要素の数、疑似要素
  • {order}：すべてのファイルにわたるこのルールのインデックス

したがって、次の順序になります。

  1. 0.2.1。*.about a[href^="mailto:"]（0 ID、1クラス+ 1属性、1要素）
  2. 0.1.1.aspan.about（0 ID、1クラス、1要素）
  3. 0.1.1.ba[href^="mailto:"]（0 id、1 attr、1 element）
  4. 0.1.0。*.about（0 ID、1クラス、0要素）

span.aboutおよびa[href^="mailto:"]は同じ仕様（1つのクラスまたは属性、および1つの要素）であるため、順序が重要であり、最後のものが優先されます。

spanを削除すると、ルールの具体性が低下し、ルーズになります。

（また、要素に直接適用される規則と、親要素から継承される他のものを区別します...）

2
The Felis Leo