CSS はいくつかの複合セレクターを提供します-フロントエンドQ&A-php.cn

1. 子孫セレクター

#構文

五、复合选择器总结

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSS はいくつかの複合セレクターを提供します

醉折花枝作酒筹

Jul 15, 2021 am 10:47 AM

CSS は、サブセレクター、隣接セレクター、包含セレクター、マルチレベルセレクターの入れ子、属性セレクター、擬似セレクター、擬似要素セレクターの 7 種類の複合セレクターを提供します。

CSS はいくつかの複合セレクターを提供します

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS では、セレクターはその種類に応じて基本セレクターと複合セレクターに分けられ、複合セレクターは基本セレクターをベースに構築され、基本セレクターを組み合わせて形成されます。 4 つの基本 CSS セレクターのまとめ CSS の基本セレクターは 1 つのセレクターで構成されます。

複合セレクターは、ターゲット要素 (タグ) をより正確かつ効率的に選択できます。
複合セレクターは、2 つ以上の基本セレクターで構成されます、さまざまな方法で組み合わせた
CSS 複合セレクターには、サブセレクター、隣接セレクター、包含セレクター、マルチレベルセレクターのネスト、および属性セレクター、疑似セレクター、疑似要素セレクターが含まれます。

1. 子孫セレクター

子孫セレクターは包含セレクターとも呼ばれ、親要素内の子を選択できます。書き方は、外側のラベルを前に、内側のラベルを後ろにスペースで区切って書きます。タグがネストされている場合、内側のタグは外側のタグの子孫になります。

構文

元素1 元素2 { 样式声明 }

ログイン後にコピー

上記の構文は、要素 1 内のすべての要素 2 (子孫) を選択することを意味します。

#注

1.要素 1 と要素 2 はスペースで区切られています

2.要素 1 は親です。要素 2 は子であり、最終的に選択されるのは要素 2

3 です。要素 2 は、要素 1

4 の子孫である限り、息子、孫などにすることができます。 . 要素 2 1 と要素 2 は、任意の基本セレクターにできます

CSS はいくつかの複合セレクターを提供します

2. サブセレクター

子要素セレクター (サブセレクター) は、特定の要素の最新の子要素として選択されます。簡単に理解すると、son 要素を選択することになります。

文法

元素1 > 元素2 {样式声明}

ログイン後にコピー

1. 要素 1 および要素 2 は大なり記号

2 で区切られています。要素 1 は親、要素 2 は子で、最終的な選択は要素 2

3 です。要素 2 は生物学的要素である必要があります。要素 2 は実の息子である必要があります。孫、ひ孫などは彼の管理下にありません。彼を実の息子と呼ぶこともできます。セレクター

Example

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

ログイン後にコピー

.nav a {        /* 后代选择器 */
    color: red;}.nav>a {        /* 子选择器 */
    text-decoration: none;}

ログイン後にコピー

CSS はいくつかの複合セレクターを提供します

3. ユニオンセレクター

ユニオンセレクターは、タグの複数のグループを選択し、それらに同じスタイルを同時に定義できます。時間。通常、集合的なステートメントに使用されます。共用体セレクタは、セレクタを英語のカンマ (,) で接続して構成されており、任意の形式のセレクタを共用体セレクタの一部として使用できます。

構文

元素1,元素2 {样式声明}

ログイン後にコピー

上記の構文は、要素 1 と要素 2 を選択することを意味します。

1. 要素 1 と要素 2 はカンマで区切られています

2. コンマはととして理解できます。意味

##3. 共用体セレクターは通常、集団宣言に使用されます

例

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪猪侠</li>
    </ul>
</body>

ログイン後にコピー

div,p,ul li{
    color: blue;
}

ログイン後にコピー

擬似クラスセレクターは、リンクに特殊効果を追加したり、1 番目または n 番目の要素を選択したりするなど、特定のセレクターに特殊効果を追加するために使用されます。擬似クラスセレクタの書き方の最大の特徴は、:hover(マウスオーバー時)、:first-child(最初の子選択)のようにコロン(:)で表現されることです。リンク疑似クラス、構造疑似クラスなど、多くの疑似クラスセレクターがあります。ここでは、まず、一般的に使用されるリンク疑似クラスセレクターを要約します。 CSS はいくつかの複合セレクターを提供します

#構文

a: link			/* 选择所有未被访问的链接 */
a: visited	/* 选择所有已经被访问的链接 */
a: hover		/* 选择鼠标指针位于其上的链接 */
a: active		/* 选择活动链接（鼠标按下但未弹起的链接） */

ログイン後にコピー

2. リンクにはブラウザのデフォルトスタイルがあるため、実際の作業ではリンクに別途スタイルを指定する必要があります。

例

<body>
    <a href="#">打工人</a><br />
    <a href="#">努力做个技术人</a>
</body>

ログイン後にコピー

a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color:blue;
    text-decoration: underline;
}

ログイン後にコピー

:focus 疑似クラスセレクターは、フォーカスフォーム要素を選択するために使用されます。。フォーカスはカーソルであり、一般にタイプのフォーム要素によって取得できるため、このセレクターは主にフォーム要素を対象としています。

语法

input:focus {
	background-color: yellow;
}

ログイン後にコピー

示例

<body>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text">
</body>

ログイン後にコピー

input:focus {
    background-color: red;
}

ログイン後にコピー

CSS はいくつかの複合セレクターを提供します

五、复合选择器总结

选择器	作用	特征	使用情况	隔开符号
后代选择器	选择后代元素	子孙后代都可以	较多	空格 .nav a
子代选择器	选择最近一级子元素	只选亲儿子	较少	大于号 .nav>p
并集选择器	选择多个元素	用于集体声明	较多	逗号 .nav,p,a
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	冒号 a:hover
:focus 选择器	选择获得光标的表单	跟表单相关	较少	冒号 input:focus