4

私はHTMLのそのような構造を持っています:

<p>
    <a href="#">
        <span class = "class-for-span"> SOME TEXT HERE </span>
    </a>
</p>

およびCSS:

p a{
    color: grey;
    text-decoration: underline;
}

.class-for-span {
    color: red;
    text-decoretion: none;
}

.class-for-span:hover {
    text-decoration:underline;
}

私はこのようなものを手に入れたい：

すべての内側の pi には、灰色の下線付きのリンクが必要です。タグにスパンがある場合は、装飾なしで赤でなければならず、ホバーすると赤の下線が引かれます。

これで、タグ内にまたがる場合、灰色の下線付きのリンクが表示されます。ホバーすると、灰色の下線が付いた赤いリンクと赤い下線が付いた赤いリンクになります。

cssだけで問題を解決するにはどうすればよいですか? 私もこのようなことを試みてきました:

p a span .class-for-span {
text-decoration: none;
}

しかし、それも機能していません...

4

3 に答える 3

4 
p a span .class-for-span {
    text-decoration: none;
}

spanとの間にスペースがあるため、機能しません.class-...。これは、「スパンclass-... 内にクラスを持つ要素」を意味します。CSSで要素の親のプロパティを上書きすることはできません。text-decoration:none;解決策は、aタグに設定し、 span：でのみ使用することです。

p a { text-decoration:none; }
p a span.class-for-span { text-decoration:none; }
p a:hover span.class-for-span { text-decoration:underline; }

これにより、アンカーにカーソルを合わせると下線が表示されますが、スパンにカーソルを合わせると必ずしも表示されません。したがって、次の場合でも、アンダースコアはスパンに表示されます。

<a href="..."><span>Text</span><img src="..." alt="" /></a>

...そして画像にカーソルを合わせます。

于 2013-02-21T15:03:55.960 に答える
1 
p a:link, p a:hover, p a:active, p a:visited {
  /* works for any 'a' tag inside a 'p' tag */
  border-bottom: 2px dotted #CCCCCC;
}

それはこれらのために働くでしょう:

<p><a href="#">Hello</a><br>
<a href="#">Hello again</a></p>
于 2013-02-21T15:02:37.517 に答える
1

スパンではなく、a 要素に下線が引かれているため、スパンから下線を削除しても、a 要素はその下線を維持したままです。オリジナルブロックを作る

p a span {
color: grey;
text-decoration: underline;
}

そして、すべてが機能し始めるはずです

于 2013-02-21T15:00:23.417 に答える