18

グローバル リンク スタイルをオーバーライドしたい div があります。グローバルと特定の 2 つのリンク スタイルがあります。ここにコード：

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 は引き続きグローバル リンク スタイルを継承します。

4

2 に答える 2

13

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;
}

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

于 2013-10-17T23:41:33.417 に答える
10

  1. css では、リンク コードに ID "#macrosectiontext a:link..." を使用せず、クラス ".macrosectiontext" を使用します。

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

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

于 2013-10-17T23:22:11.510 に答える