[CSS/DIV] 4つの主要なCSS属性値選択器の使用を分析しましょう

この記事ではその説明をしますCSSプロパティバリューセレクター属性選択ツールのフォーマットは、要素の後に括弧付きで、括弧内に属性を付ける形、または属性表現(説明が正しいかはわかりませんが、自己作成の単語)で、例えばh1[title]、h1[title="logo"]など)です。この記事で多くのことを学べると思います。

CSSチュートリアル:CSS属性値選択器

CSS AttributeSelectorについて、属性セレクターに馴染みがない方はないかもしれません。本質的には、IDとクラスセレクタは属性値セレクターであり、単にIDまたはクラス値を選択するだけです。

属性セレクターの形式は、要素の後に括弧がつき、括弧内に属性、または属性表現(説明が正しいかはわかりませんが、自己作成の単語)で、例えばh1[title]、h1[title="Logo"]などです。以下の議論で4つの具体的な形式が見られます。

1. シンプルなCSS属性値セレクター

名前に関わらず、これは単純な属性セレクターの特徴です。

h1[クラス]{color:silver; クラスの値に関係なく、クラスを持つ任意のH1要素に作用します。 したがって<h1class="hoopla">Hello</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 of Fooling</h1>はこのルールの影響を受けます。

もちろん、この「プロパティ」は単なるクラスやidではなく、imgのaltのように、img[alt]{cssdeclarationshere; alt属性を持つ任意のIMG要素に適用されます。 次にa[href][title]{font-weight:bold; }はどうですか? ご存知の通り、これは <atitle="W3CHome">W3Cのように、href と title 属性の両方を持つ要素で動作</a>します。

2. 正確なCSS属性値選択器

IDとclassは本質的に正確な属性値セレクターです。はい、H1#logoはh1[id="logo"]に等しいです。 前述の通り、私たちはidやclassに限定せず、どんなプロパティでも使えます! 例えば、a[][title="W3CHome"]{font-size:200%; } は <atitle="W3CHome">W3C)に適用されます</a>。

3. いくつかのCSS属性値選択器

名前が示す通り、属性値が部分的に一致している限り(この場合は単語全体に実際に一致する部分)がその要素に作用します。 例を見てみましょう。

これらのどれでもpのフォントが太字になることがあります。

このセレクターは非常に便利です。例えば、タイトルに「Figure」という文字列を付けたいイラスト(例:title="Figure5:xxx description")をスタイリングしたい場合、img[title~="Figure"]を使うことができます。

最初の文で強調したように、単語全体を一致させる必要があり、img[title~="Figure"]はtitle="Figure5:xxx description"と一致しません。

また、少しテストしてみました。例では「Figure」を「Illustration」に変え、img[title~="Figure"]をimg[title~="Illustration"]に変更すると、エンコードがGB2312でもUTF-8でもFirefoxで一致します。 中国語のCSSサポートは悪くないようです。

4. 特殊なCSS属性値セレクター

このセレクター、ちょっと変だよね。 仕組みはこうです。説明するよりも例を挙げる方が簡単です。

*[lang|="en"]{color:white; このルールは、属性langまたはen-で始まる要素の値を選択します。 つまり、<h1lang="en">Hello!</h1>、<plang="en-us">ご挨拶します!</p>そして<divlang=「en-au」>グデイ!</div>そして一致しません<plang="fr">Bonjour!</p><h3lang=「cy-en」>Jrooana!</h3>。