1

PS: リンクの上にカーソルを置いたときにバーをよく見ると、右端の数ピクセルが黒のままです。それはなぜですか、どうすれば修正できますか?

現在のナビゲーション バーのコードは次のとおりです。

HTML:

<body>
    <div class="navbar">
        <a href="home.html" id="current">-home</a>
        <a href="about.html">about</a>
        <a href="store.html">store</a>
        <a href="contact.html">contact</a>
    </div>
</body>

CSS:

.navbar{
width: 75%;
background-color: black;
margin-left: auto;
margin-right: auto;
margin-top: 15px;}
.navbar a:link, a:visited{
background-color: black;
color: white;
text-decoration: none;
text-transform: uppercase;
border-right: 2px solid white;
font-weight: bold;
font-family: verdana;
font-size: 37px;
text-align: center;
padding-left: 5px;
padding-right: 5px;}
.navbar a:hover, a:active, a:focus{
background-color: #4A4A4A;
text-decoration: underline;}
#current a:link, a:visited{
background-color: red;}

コードからわかるように、ホーム リンクの色を赤に設定しようとしています。しかし、これは明らかにうまくいきませんでした。どうすればいいですか？

4

5 に答える 5

0

current は link 要素の ID であるため、そうする#current {background-color:red;}必要があります。

ここで、現在の ID を持つ要素内のリンク要素の色を設定しようとしています。

于 2012-09-19T15:32:51.110 に答える
0

CSS の #current の後のコンマを忘れました。残りの行は必要ありません。#currentまた、のみ またはのいずれかを書くことができますa#current。

于 2012-09-19T15:34:00.690 に答える
0

主な問題は、誰もが指摘しているように、#current を変更しようとしている要素がアンカー タグでもあることです。そのため、#current a:link の代わりに a#current:link または #current と言う必要があります。 #current タグの子ではありません。

興味があれば、これが私のjsFiddleです。

于 2012-09-19T15:40:50.717 に答える
0

CSS ルールを次のように変更します。

#current a:link, a:visited{
background-color: red;}

に

#current {
background-color: red;}

jsFiddle の例

ルールは、#current の ID を持つ要素を指定し、#current だけで十分な場合はその子リンクを指定します。

于 2012-09-19T15:32:37.257 に答える
0

CSS が正しくありません。

#current a:link

これは、ID #current を持つ要素内のリンクのスタイルを設定すると言っています

ただし、リンクはIDを持つ要素です。これを試してください：

a#current { color: red; }

ただし、クラスを使用することをお勧めします。

a.red { color: red; }

その後：

<a class="red">bla</a>
于 2012-09-19T15:40:02.933 に答える