CSS疑似クラスの使い方

CSS 疑似クラスを使用するにはどうすればよいですか?

CSS 疑似クラスは、セレクターに特殊効果を追加するために使用されます。

疑似クラス構文:

selector:pseudo-class {property:value;}

CSS クラスでも疑似クラスを使用できます:

selector.class:pseudo-class {property:value;}

anchor 疑似クラス

CSS をサポートするブラウザでは、リンクのさまざまな状態をさまざまな方法で表示できます

例

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注: CSS 定義では、a:hover を設定する必要があります。これは単にa:link および a:visit の後に有効です。

注: CSS 定義では、a:active を有効にするには、a:hover の後に配置する必要があります。

注: 疑似クラス名では大文字と小文字が区別されません。

疑似クラスと CSS クラス

疑似クラスは CSS クラスとともに使用できます:

a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

上の例のリンクにアクセスした場合は、赤く表示されます。

CSS :first-child 擬似クラス

:first-child 擬似クラスを使用して、親要素の最初の子要素を選択できます。

注: IE8 の以前のバージョンでは、:first-child を有効にするには、1a309583e26acea4f04ca31122d8c535 を宣言する必要があります。

最初の e388a4556c0f65e1904146cc1a846bee 要素と一致する

次の例では、セレクターは、任意の要素の最初の子である e388a4556c0f65e1904146cc1a846bee 要素と一致します。

Example

p:first-child
{
    color:blue;
}

すべての e388a4556c0f65e1904146cc1a846bee 要素の最初の 5a8028ccc7a7e27417bff9f05adf5932 要素と一致します

次の例では、一致するすべての e388a4556c0f65e1904146cc1a846bee を選択します。要素の要素:

Instance

p > i:first-child
{
    color:blue;
}

最初の子要素である e388a4556c0f65e1904146cc1a846bee 要素内のすべての 5a8028ccc7a7e27417bff9f05adf5932 要素と一致します

次の例では、セレクターは、要素の最初の子であるすべての e388a4556c0f65e1904146cc1a846bee 要素内のすべての 5a8028ccc7a7e27417bff9f05adf5932 要素と一致します:

Example

p:first-child i
{
    color:blue;
}

CSS - :lang pseudo-class

:lang 擬似クラスを使用すると、さまざまな言語の特別なルールを定義できます。

注: IE8 では、;lang 擬似クラスをサポートできる < ;!DOCTYPE> を宣言する必要があります。クラス。

次の例では、:lang クラスは、属性値 no を持つ q 要素の引用符のタイプを定義します:

Example

q:lang(no) {quotes: "~" "~";}

以上がCSS疑似クラスの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。