8

疑似クラスが子を持たないすべての要素を選択することは承知してい:emptyますが、テキスト ノードを子として持つ要素のみを選択したいと考えています。

テキストとは異なる色のハイパーリンクの下枠がありますが、ハイパーリンクされた画像にもこの下線が引かれているため、これは問題です。

a *:not(*){ border-bottom-width: 0; }これを修正しようと試みましたが、うまくいきませんでした。a子のテキストノードのみを持つタグを選択する方法はありますか?

4

6 に答える 6

1

新しい答え:

テキストではなく画像の下に境界線が必要な場合は、次のようにします。

a img { border-bottom: 1px solid #000; }
a:空 { ボーダー: なし; }

反対の場合 (画像ではなくテキストの下の境界線) は、次のようにします。

a:empty { ボーダーボトム: 1px ソリッド #000; }
a img { ボーダー: なし; }

古い答え:

タグでラップされた画像だけの問題である場合は、次のことを試してください。

a img { ボーダーボトム: なし; }
于 2013-02-26T00:51:11.290 に答える
1

クレイジーなセレクターの代わりに、境界線を負のマージンで非表示にしてみませんか?

a img {
  margin-bottom: -6px;
}

デモ

于 2013-02-26T01:06:05.653 に答える
1

私があなたの問題を正しく理解していれば、ハイパーリンクされた画像に下線が付かないようにしようとしています。もしそうなら、次のようなことをしてみませんa img { text-decoration:none }か？

編集：下線を付けたくないimgタグのリンクの場合は、それらのリンクにクラスを適用しますtext-decoration:none

于 2013-02-26T00:50:04.013 に答える
0

一人っ子が...で<a>はない場合img

a:only-child:not(img)
{
    border-bottom-width: 1;
}
于 2013-02-26T01:03:18.990 に答える
0

プロパティが適用され、アンカーの一番上のボックスの外側にレンダリングされる方法のため、これを実現することはできませんborder。事実上、境界線でそのような効果を実現する唯一の方法は、プロパティを無効にすることです。場合によっては、背景色の下の境界線を使用してアンカーの境界線の上に重ねることが視覚的に許容される場合があります。効果はフィルターでシミュレートできるかもしれませんが、十分にサポートされているクロスブラウザーであるとは期待できません.

私が提案するのは、text-decorationプロパティに戻ることです *別の独立した下線の色を維持しながら` - 全体的にきちんとしたアプローチですが、追加要素のオーバーヘッドがないわけではありません:

<style>
.fancy-underline { color:blue; text-decoration:underline; } 
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
  <img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>

http://jsfiddle.net/ovfiddle/TwmmF/3/

于 2013-02-26T03:53:24.023 に答える
0

結局、jQueryを使用するだけになりました。今のところ、CSS だけでそれが可能だとは思えません。

jQuery('document').ready(function(){
    jQuery("a").each(function(){
        if(this.children.length !== 0)
            this.style.borderBottomWidth='0';
    });
});
于 2013-02-26T18:53:05.260 に答える