27

CSS 属性セレクターを使用すると、属性値に基づいて要素を選択できます。残念ながら、私は何年もそれらを使用していません (主な理由は、最新のすべてのブラウザーでサポートされていないためです)。ただし、次のようなコードを使用して、すべての外部リンクをアイコンで装飾するためにそれらを使用できたことをはっきりと覚えています。

a[href=http] {
    background: url(external-uri);
    padding-left: 12px;
}

上記のコードは機能しません。私の質問は次のとおりです。どのように機能しますか? 属性が で始まるすべての<a>タグを選択するにはどうすればよいですか? 公式の CSS 仕様 (上記のリンク) では、これが可能であるとは言及されていません。しかし、私はこれをしたことを覚えています。href"http"

(注: 明らかな解決策はclass、区別のために属性を使用することです。私は HTML コードの作成方法にほとんど影響を与えないため、これを避けたいと考えています。私が編集できるのは CSS コードだけです。)

4

3 に答える 3

30

CSS 2.1 については、http://www.w3.org/TR/CSS21/selector.html#attribute-selectorsを参照してください。

エグゼクティブサマリー：

    属性セレクターは、次の 4 つの方法で一致する可能性があります。

    [攻撃]
    属性の値に関係なく、要素が「att」属性を設定する場合に一致します。
    [属性=値]
    要素の「att」属性値が正確に「val」の場合に一致します。
    [att~=値]
    要素の「att」属性値がスペースで区切られたリストである場合に一致します
    そのうちの 1 つは正確に「val」です。このセレクターを使用すると、
    値にスペースを含めることはできません (スペースで区切られているため)。
    [属性|=値]
    要素の「att」属性値がハイフンで区切られたリストである場合に一致します
    「val」で始まる「単語」。試合は常に試合開始時から
    属性値。これは主に、言語サブコードの一致を許可することを目的としています
    RFC 3066 ([RFC3066]) で説明されている (たとえば、HTML の「lang」属性)。

CSS3 もセレクターのリストを定義していますが、互換性は大きく異なります。

また、ブラウザーでどのセレクターが機能するかを示す気の利いたテスト スイートもあります。

あなたの例については、

a[href^=http]
{
    background: url(external-uri);
    padding-left: 12px;
}

トリックを行う必要があります。残念ながら、IE ではサポートされていません。

于 2008-09-08T09:32:56.373 に答える
3

Antti の例では、おそらく「外部」としてフラグを立てたくない独自のドメインへの絶対リンクにキャッチを追加する必要があることに注意してください。たとえば、次のようになります。

a[href^="http://your.domain.com"]
{
    background: none;
    padding: 0;
}

そして、前の宣言の後にこれが必要になります。

リンク先の "http-info.html" という名前のローカル ドキュメントがある場合に備えて、完全なプロトコル プレフィックスを含めることもできます。

a[href^="http://"]
{
    background: url(external-uri);
    padding-left: 12px;
}

これらのやや複雑なケースの両方で、値を引用する必要があることに注意してください。私にとって、これらはIE7で機能します。

于 2008-09-08T10:59:53.013 に答える