CSS の基礎学習 7: 属性 Selector_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS の基礎学習 7: 属性 Selector_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:48

オリジナル

1289 人が閲覧しました

CSS 構文で、指定された属性を持つ HTML 要素のスタイルを設定します。 class 属性や id 属性だけでなく、指定した属性を持つ HTML 要素のスタイルを設定できます。 (注: Internet Explorer 7 (およびそれ以降) は、!DOCTYPE が指定されている場合に属性セレクターをサポートします。

IE6 以前のバージョンは属性セレクターをサポートしません。)

CSS2 では属性セレクターが導入されました。属性セレクターは、属性と属性値に基づいて要素を選択できます。

使用の使用を使用します。

(1) 簡単な例から始めましょう。title 属性を使用してすべての要素のスタイルを設定します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">[title]{color:red;}</style></head><body><h1>可以应用样式：</h1><h2 title="Hello world">Hello world</h2><a title="phpStudy" href="http://phpStudy.net">phpStudy</a><hr /><h1>无法应用样式：</h1><h2>Hello world</h2><a href="http://phpStudy.net">phpStudy</a></body></html>

ログイン後にコピー

ブラウザの実行結果は次のようになります:

(2) 上記と同様に、href 属性を持つアンカー (a 要素) にのみスタイルを適用できます:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">a[href]{color:red;}</style></head><body><h1>可以应用样式：</h1><a href="http://phpStudy.net">phpStudy</a><hr /><h1>无法应用样式：</h1><a name="phpStudy">phpStudy</a></body></html>

ログイン後にコピー

結果は次のように表示されます。 :

(3) 属性セレクターをリンクするだけで、複数の属性に基づいて選択することもできます。たとえば、HREF 属性と Title 属性を持つ

HTML ハイパーリンクのテキストを赤に設定するには、次のように記述できます。

ラベルによるラベルによるでの特定の属性値の選択では、特定の属性を持つ要素を選択することに加えて、選択範囲をさらに絞り込んで特定の属性

値を持つ要素のみを選択することもできます。 T 以下の例は、Title = "PHPSTUDY" のすべての要素設定スタイルです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">a[href][title]{color:red;}</style></head><body><h1>可以应用样式：</h1><a title="phpStudy Home" href="http://phpStudy.net">phpStudy</a><hr /><h1>无法应用样式：</h1><a href="http://phpStudy.net">phpStudy</a><a title="phpStudy Home">phpStudy</a></body></html>

ログイン後にコピー

E ブラウザーの実行結果は次のとおりです:

注意する必要があります:

属性は属性値と完全に一致する必要があります。このフォーマット要件は属性値と正確に一致する必要があることに注意してください。属性値にスペース

で区切られた値の列が含まれている場合、マッチングに問題が生じる可能性があります。的一下タグを考慮してください:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">[title=phpStudy]{border:5px solid blue;}</style></head><body><h1>可以应用样式：</h1><h2 title="phpStudy">Hello world</h2><a title="phpStudy" href="http://phpStudy.net">phpStudy</a><hr /><h1>无法应用样式：</h1><p title="greeting">Hi!</p><a class="phpStudy" href="http://phpStudy.net">phpStudy</a></body></html>

ログイン後にコピー

p [class = " important"] として記述する場合、このルールは例のマークと一致することはできません。

要特定の属性值来选择该要素、必须这样写：

<p class="important warning">This paragraph is a very important warning.</p>

ログイン後にコピー

三属性と值选择器 - 多个值

部分的なプロパティ値に基づいて選択

必要な場合はプロパティ値に基づくリスト内の単語を選択するには、チルダ (~) を使用する必要があります。クラス属性で重要な要素を選択したいとします。次のセレクターを使用してこれを行うことができます:

p[class="important warning"] {color: red;}

ログイン後にコピー

波数が無視される場合、それは完全な値の一致が必要であることを意味します。完成すること。

次の例では、指定された値を持つ title 属性を含むすべての要素のスタイルを設定します。スペースで区切られた属性値に適用:

p[class~="important"] {color: red;}

ログイン後にコピー

ブラウザ操作の結果:

ヒント:

部分値属性セレクターとドットクラス名表記の違い

このセレクターは、など価格クラスセレクターで説明したドット付きのクラス名の表記に基づいています。言い換えれば、p. important と p[" important"] は、

を HTML ドキュメントに適用すると同等になります。では、なぜまだ「~=」属性セレクターがあるのでしょうか?クラスだけでなく、あらゆる属性に使用できるためです。

- - 多数の画像を含むドキュメントを持つことができますが、その一部のみが写真です。このために、タイトルドキュメントに基づいて部分属性

を使用して、次の画像のみを選択できます:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">[title~=hello]{color:red;} </style></head><body><h1>可以应用样式：</h1><h2 title="hello world">Hello world</h2><p title="student hello">Hello phpStudy students!</h1><hr /><h1>无法应用样式：</h1><h2 title="world">Hello world</h2><p title="student">Hello phpStudy students!</p></body></html>

ログイン後にコピー

このルールは、タイトルテキストに「Figure」が含まれるすべての画像を選択します。タイトル属性を持たない画像、またはタイトル属性に「図」を含まない画像はマッチングされません。性属属定

特定の属性セレクターについて。次の例を参照してください:

  img[title~="Figure"] {border: 1px solid gray;}

ログイン後にコピー

このルールは、lang 属性が en に等しいか en- で始まるすべての要素を選択します。したがって、次のマークアップ例の最初の 3 つの要素は選択されますが、最後の 2 つの要素は選択されません:

[lang|="en"] {color: red;}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

ログイン後にコピー

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">[lang|=en]{color:red;}</style></head><body><h1>可以应用样式：</h1><p lang="en">Hello!</p><p lang="en-us">Hi!</p><hr /><h1>无法应用样式：</h1><p lang="us">Hi!</p><p lang="zh">Hao!</p></body></html>

ログイン後にコピー

浏览器运行的结果为：

五子串匹配属性选择器

下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。

按照规范的说法，应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器，包括 IE7。

下表是对这些选择器的简单总结：

可以想到，这些选择有很多用途。

举例来说，如果希望对指向 phpStudy 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写

样式。可以指定规则为：