ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS はいくつかの複合セレクターを提供します

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

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-07-15 10:47:123848ブラウズ

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;
    }

  • #4. 擬似クラスセレクター

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

#構文

a: link			/* 选择所有未被访问的链接 */
a: visited	/* 选择所有已经被访问的链接 */
a: hover		/* 选择鼠标指针位于其上的链接 */
a: active		/* 选择活动链接(鼠标按下但未弹起的链接) */
    1. 確実に行うにはが有効な場合は、LVHA: link-visited-hover-active の順に宣言してください。順序を逆にすると故障の原因となります。
  • 2. リンクにはブラウザのデフォルトスタイルがあるため、実際の作業ではリンクに別途スタイルを指定する必要があります。

  • 3. 実際の作業では、リンクの状態とマウス通過の状態を記述するだけです。

<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

    推荐学习:css视频教程

以上がCSS はいくつかの複合セレクターを提供しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。