web-dev-qa-db-ja.com

html div内のリンクスタイルをオーバーライドする

グローバルリンクスタイルをオーバーライドするdivがあります。 2つのリンクスタイルがあります。1つはグローバル、もう1つは特定です。ここにコード：

A:link {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}

#macrosectiontext
{
    position:relative;
    font:Arial, sans-serif;
    text-align:center;
    font-size:50px;
    font-style: bold;
    margin-top:245px;
    opacity: 0.6;
    background-color:transparent;
}

#macrosectiontext A:link {text-decoration: none; color: #000000;}
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}

そして、私はこのようなdivを使用します：

<div id="macrosectiontext"><a href="www.google.it">bla bla bla</a></div>

ただし、動作しないようです。 divは引き続きグローバルリンクスタイルを継承します。

csshtmlhyperlinkstylesheet
14
Gianluca Ghettini

  1. The cssでは、リンクコードにID「#macrosectiontext a：link ...」を使用しません。クラス「.macrosectiontext」を使用します。

  2. リンクスタイルで大文字の「A」の代わりに小文字の「a」を使用する

  3. スタイルを数回しか使用しない場合は、リンクの周りにspanタグを使用し、divの代わりにspanタグからスタイルを呼び出すことができます。

7
JFelton

CSSは継承に対して機能するため、変更するプロパティのみをオーバーライドする必要があります。

常にHTMLとCSSを小文字で書いてみてください、それでもHTMLとCSSは正しいです

a:link, a:visited, a:hover, a:active {
  text-decoration: none; color: #f00;
}

#macrosectiontext {
  position:relative;
  font:Arial, sans-serif;
  text-align:center;
  font-size:50px;
  font-style: bold;
  margin-top:245px;
  opacity: 0.6;
  background-color:transparent;
}

#macrosectiontext a:link {color: #000;}
#macrosectiontext a:visited, #macrosectiontext a:hover,
#macrosectiontext a:active {
  color: #fff;
}

I あなたのためにフィドルを作りました コードが機能していることを示すために（デモ用にホバー色を変更しました）

10
Mark