CSSセレクターとは何ですか? CSSセレクターにはどのような種類がありますか?

不言

リリース： 2019-05-22 09:20:06

オリジナル

15119 人が閲覧しました

CSS セレクターは CSS を学習する上で間違いなく非常に重要です。それで、 CSS セレクターとは何ですか? CSSセレクターにはどのような種類がありますか? これは私たちがマスターしなければならないことですこの記事では、CSSセレクターの基本的な定義と、CSSセレクターにはどのような種類があるかを紹介します。

CSSセレクターとは何ですか? CSSセレクターにはどのような種類がありますか?

早速本題にいきましょう~~

CSSセレクターとは何ですか?

Baidu Encyclopedia では、CSS セレクターの基本的な定義が次のとおりであることがわかります。各 CSS スタイル定義は 2 つの部分で構成され、形式は次のとおりです: [code] selector {style} [/code] before {} の部分それは「セレクター」です。長い段落を言いましたが、要するに、CSS を使用して HTML ページ内の要素を 1 対 1、1 対多、または多対 1 で制御することです。これには CSS セレクターを使用する必要があります。 html ページの要素は CSS セレクターを通じて制御されます。 (推奨ビデオチュートリアル: CSS チュートリアル)

次に、上記の定義を具体的に分析した図を見てみましょう。

CSSセレクターとは何ですか? CSSセレクターにはどのような種類がありますか?

図に示すように、次のことがわかります。

{} より前の部分は「セレクター」であり、「セレクター」は、{} 内の「スタイル」のオブジェクト、つまり「 style" は Web ページ内のどの要素に作用しますか

セレクターは通常、スタイルを変更する必要がある HTML 要素です (

、

など)。それぞれフォーマット宣言文は「属性名:属性値」の組で構成され、属性名と属性値はコロンで区切られ、各宣言文は英語のセミコロン「;」で終わります。

CSS セレクターとは何かを紹介した後、CSS セレクターにはどのような種類があるのかを見てみましょう。

CSSセレクターの種類は何ですか?

CSS セレクターの種類を見てみましょう

1. タグセレクター (body、div、p、ul、li など)。

2. クラスセレクター (例: class="head"、class="head_logo")。

3. ID セレクター (例: id="name"、id="name_txt")。

4. グローバルセレクター (* 記号など)。

5. セレクターを結合します (.head .head_logo など。2 つのセレクターはスペースバーで区切られていることに注意してください)。

6. セレクターを継承します (例: div p、2 つのセレクターはスペースバーで区切られていることに注意してください)。

7. 疑似クラスセレクター (例: リンクスタイル、要素の疑似クラス、4 つの異なる状態: リンク、訪問済み、アクティブ、ホバー)。

8. 文字列マッチング用の属性セレクター (^ $ * 3 種類、それぞれ開始、終了、包含に対応)。

上記の 8 つの CSS セレクターの中で最も一般的に使用される CSS セレクターは、タグセレクター、.class セレクター、ID セレクター、属性セレクター、および疑似クラスセレクターです。

以下に、これら 5 つの CSS セレクターのそれぞれの例を示します: (他のセレクターの例については、

CSS マニュアル

を参照してください)

(1) タグセレクター:

<html>
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
span{color: green;font-size: 20px}
</style>
</head>
<body>
<span>hello</span><br/>
<span>world</span>
</body>
</html>

ログイン後にコピー

効果は次のとおりです。 :

CSSセレクターとは何ですか? CSSセレクターにはどのような種類がありますか?

(2) クラスセレクター:

<html>
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
    .style1{background-color: green}
    .style2{background-color: yellow}
</style>
</head>
<body>
    <div class = "style1">div1</div>
    <div class = "style1">div2</div>
    <div class = "style2">div3</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

CSSセレクターとは何ですか? CSSセレクターにはどのような種類がありますか?

(3) ID セレクター:

<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
    #div1{background-color: yellow}
    #div2{background-color: green
    }
</style>
</head>
<body>
    <div id = "div1">div1</div>
    <div id = "div1">div1</div>
    <div id = "div2">div2</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

CSSセレクターとは何ですか? CSSセレクターにはどのような種類がありますか?

(4) 属性選択デバイス:

<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
    input[type = &#39;text&#39;] {background-color: gray}
    input[type = &#39;password&#39;] {background-color: pink}
</style>
</head>
<body>
    <form>
        name:<input type = "text"><br/>
        pass:<input type = "password">
    </form>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

CSSセレクターとは何ですか? CSSセレクターにはどのような種類がありますか?

(5) 疑似クラスセレクター:

<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
    <style type="text/css">
        a:link{color:yellow ;font-size: 50px}
        a:hover{color:green;font-size: 50px}
        a:active{color:blue;font-size: 50px}
        a:visited{color:red;font-size: 50px}
    </style>
</head>
<body>
    <a href = "http://www.php.cn">点击</a>
</body>
</html>

ログイン後にコピー

効果の説明:

Web の場合、ラベルは黄色になりますページが開きます

マウスをラベル上に置くとラベルが緑色になります

ラベルをクリックすると青色になります
クリックするとラベルが赤色になります

関連する推奨事項:

CSS クラスセレクターと ID セレクター

CSSセレクターの構成

以上がCSSセレクターとは何ですか? CSSセレクターにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。