ホームページ > 記事 > ウェブフロントエンド > CSS3基礎学習 selector_html/css_WEB-ITnose

CSS3基礎学習 selector_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:21:061111ブラウズ

CSS3 では、セレクターを使用してスタイルを要素に直接バインドすることが推奨されています。

Web 開発プロセスでは、さまざまな要素に適用する多くのクラスを定義する必要があります。クラス自体にはセマンティクスがなく、再利用できるため、クラスを過度に使用すると、スタイルシート構造全体が非常に混乱します。クラスの使用頻度を減らすためには、要素をできるだけセレクターで指定する必要があります。さらに、セレクターを使用して多くのルールを定義することもできるため、クラスを繰り返し定義するコードの量も削減できます。

CSS3 には、主に次のセレクターがあります: 属性セレクター、構造セレクター、UI 状態セレクター、ユニバーサル兄弟要素セレクター。それぞれを紹介しましょう:

(1) 属性セレクター

名前が示すように、属性セレクターはさまざまな属性に基づいてターゲットを選択します。通常、属性セレクターをワイルドカードと組み合わせて使用します。式は次のとおりです: [attr=val] {style content}。一般的に使用される 3 つのワイルドカード文字があります:

1) [ attr*=val ] 'attr' 属性に val 文字列を含むすべての要素を返します。たとえば、[id*=section] では #section1 と #subsection を選択できますが、section-tion は選択できません。

2) [ attr^=val ] 'attr' 属性が val 文字列で始まるすべての要素を返します。たとえば、[id*=section] は #section1 を選択できますが、#subsection は選択できません。

3) [ attr$=val ] 'attr' 属性が val 文字列で終わるすべての要素を返します。たとえば、[id*=section] では #subsection を選択できますが、#section1 は選択できません。

属性セレクターのルールは単純ですが、適切に使用するとコードを大幅に簡素化できます。

(2) 構造セレクター

CSS では、カスタムクラスセレクターに加えて、a 要素の a:link、a:visited など、CSS によって定義されたセレクターもあります。 hover、a:active これらのステータス疑似クラス。クラスと組み合わせて使用できます。式: セレクタークラス名: 疑似クラス/疑似要素 {スタイルコンテンツ}。 CSS の構造セレクターは次のとおりです (http://www.w3school.com.cn/ から引用):

セレクターの例例説明 CSS :last-childp:last-child 親要素に属する最後の子要素である各 e388a4556c0f65e1904146cc1a846bee 要素を選択します。 3:only-childp:only-child 親要素の唯一の子要素である各 e388a4556c0f65e1904146cc1a846bee 要素を選択します。 3:nth-child(n)p:nth-child(2) 親要素の 2 番目の子であるすべての e388a4556c0f65e1904146cc1a846bee 要素を選択します。 3:nth-last-child(n)p:nth-last-child(2)最後の子要素から数えて上記と同じ。 3:first-of-type 親の最初の e388a4556c0f65e1904146cc1a846bee 要素である各 e388a4556c0f65e1904146cc1a846bee 要素を選択します。 3p:last-of-type 親の最後の e388a4556c0f65e1904146cc1a846bee 要素であるすべての e388a4556c0f65e1904146cc1a846bee 要素を選択します。 3 親の唯一の e388a4556c0f65e1904146cc1a846bee 要素であるすべての e388a4556c0f65e1904146cc1a846bee 要素を選択します。 333

ここでは、一般的に使用されるセレクターと説明する内容をいくつか示します。

1) セレクターの前後: 通常、コンテンツと組み合わせて使用され、選択した要素の前後にコンテンツを追加します (要素内の innerHTML に追加されます)。

 1 <!DOCTYPE html> 2   <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title>各种选择器</title> 6     <style type="text/css"> 7         h2:after { 8            content: "（在后面添加文字，可以指定样式）"; 9            color: blue;10         }11     </style>12   </head>13   <body>14     <p>显示效果：</p>15     <div id="main">16       <h2>第一个标题</h2>17       <p>第1个段落</p>18       <h2>第二个标题</h2>19       <p>第2个段落</p>20       <h2>第三个标题</h2>21       <p>第3个段落</p>22     </div>23   </body>24 </html>

追加されていない要素がある場合は、それらの要素にクラスを設定し、そのコンテンツを none に設定できます。 h2.noadd:after { content: none; }

さらに、コンテンツを画像 URL (pathname.png) にすることの利点は、多くの内容を記述する必要がないことです。 img タグは、ショッピングリストの新しいアイテムや記事リストの新しい記事などによく使用されます。

コンテンツの役割を考えると、その重要な用途の 1 つはプロジェクトにシリアル番号を追加することであると誰もが考えるでしょう。シリアル番号を追加するには、コンテンツ内でカウンターを指定し、次にカウンター属性を定義するという 2 つのステップが必要です。ターゲット要素のスタイルシート内 (couter-increment や counter-reset など)

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title>各种选择器</title> 6     <style type="text/css"> 7       h2:before { content: '第'counter(hcouter)'项'; color: red;} 8       h2 { counter-increment: hcouter; counter-reset: pcouter;} 9       p:before { content: '第'counter(pcouter)'段'; color: blue;}10       p { counter-increment: pcouter; }11     </style>12   </head>13   <body>14     <span>显示效果：</span>15     <div id="main">16       <h2>第一个标题</h2>17       <p>段落</p>18       <p>段落</p>19       <p>段落</p>20       <h2>第二个标题</h2>21       <p>段落</p>22       <p>段落</p>23     </div>24   </body>25 </html>

ネスティングでは、サブプロジェクトの前に counter-reset を設定する必要があることに注意してください。下位プロジェクト番号のカウンター、それ以外の場合は上の 2 番目の見出しの下にあります。段落は 4 から始まります。

2) ターゲット: ターゲットセレクターを使用して、ページ内のターゲット要素のスタイルを指定します (ID はページ内のハイパーリンクとして使用されるように設定されています)。スタイルは、ユーザーがリンクをクリックしてジャンプした後にのみ開始されます。ターゲット要素に適用されます。

3):nth-child(n),:nth-of-type(n): child と type の違いは、child は子要素を数えるときに型を区別しないのに対し、type は型を区別することです。例:

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="UTF-8"> 5         <title>各种选择器</title> 6         <style type="text/css"> 7             h2:nth-child(2) { background-color: blue; } 8             h2:nth-child(3) { background-color: grey; } 9         </style>10     </head>11     <body>12         <h2>第一个标题</h2>13         <p>第1个段落</p>14         <h2>第二个标题</h2>15         <p>第2个段落</p>16         <h2>第三个标题</h2>17         <p>第3个段落</p>18     </body>19 </html>

ページには次が表示されます:

当初の意図は 2 番目と 3 番目の c1a436a314ed609750bd7c7d319db4da タグの背景色を設定することでしたが、ブラウザによって与えられた結果により 2 番目の h2 が変更されました。灰色の背景に変更すると、3 番目の h2 はまったく効果がありません。これは、h2 親要素の子が型に分類されていないため、e388a4556c0f65e1904146cc1a846bee も含まれます。この場合、 h2:child(2) は「e388a4556c0f65e1904146cc1a846bee最初の段落94b3e26ee717c64999d7867364b1b4a3」となり、 h2:child(3) は「c1a436a314ed609750bd7c7d319db4da2番目のタイトル2e9b454fa8428549ca2e64dfac4625cd」となります。

この問題を解決するには、:nth-of-type(n) を使用して要素の型を指定し、望ましい結果を得ることができます。

1 <style type="text/css">2     h2:nth-of-type(2) { background-color: blue; }3     h2:nth-of-type(3) { background-color: grey; }4 </style>

さらに、(n) をパラメータ化してループモードを実現することもできます。ループとしての x の数を指定するには、y は 1~x をとり、x のタイプを表します。 3n+1、3n+2、3n+3 (3n と省略できます) などのループ。 x=2の場合は奇数と偶数の項目となり、odd（奇数）またはeven（偶数）という言葉で表現できます。リストや表の背景色を交互に変えるシーンでよく使われます。切り替わった。

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="UTF-8"> 5         <title>各种选择器</title> 6         <style type="text/css"> 7             ul.lis {  8                 width: 140px; 9                 padding: 10px;10                 margin: 0;11             }12             ul.lis li {13                 list-style-type: none;14                 white-space: nowrap;15                 overflow: hidden;16                 text-overflow: ellipsis;17             }18             ul.lis li:nth-child(odd) { background-color: aquamarine; }19             ul.lis li:nth-child(even) { background-color: burlywood; }20         </style>21     </head>22     <body>23         <span>显示效果：</span>24         <div id="main">25             <ul class="lis">26                 交替显示列表项目27                 <li>列表项目1，奇数项目背景色</li>28                 <li>列表项目2，偶数项目</li>29                 <li>列表项目3</li>30                 <li>列表项目4</li>31             </ul>32         </div>33     </body>34 </html>

(3) UI ステータス擬似クラスセレクター

CSS3 も 11 の UI 要素ステータス擬似クラスセレクターを提供しますが、以下に示すように、ブラウザーごとに UI 要素ステータスセレクターのサポートが異なります。

これらのセレクターの大部分は PC 側用に特別に設定されており、主にいくつかの動的フォームで使用されます。画面サイズとインタラクティブなエクスペリエンスを考慮すると、モバイルページで一度に表示されるフォーム要素はできる限り少なくする必要があります。これは、モバイル側での入力フォームのエクスペリエンスが比較的悪いためです (実際、PC 側も同様です!)。。そのため、小さな内容ではあまり堅苦しいことは必要ありません！

(4) ユニバーサル兄弟要素セレクター

使用形式: 子要素 1 - 子要素 2 {スタイルコンテンツ}

返されるのは、子要素 1 の後に要素 1 と同じレベルにあるすべての子要素 2 です。ここには 2 つの選択ルールがあります。同じレベルの要素 1 の背後と子要素 2 です。

要約: セレクターのルールはそれほど多くなく、使用法は非常に簡単です。難しいのは、適切なセレクターの組み合わせを選択する方法です。上記のセレクターの利点は正確な配置ですが、同時に、後で要素を追加または削除するために構造を変更する場合、上記のセレクターを使用すると問題が発生する可能性があります。

first-line	p:first-line	各 e388a4556c0f65e1904146cc1a846bee 要素の最初の行を選択します。	1
:first-letter	p:first-letter	各 e388a4556c0f65e1904146cc1a846bee 要素の最初の文字を選択します。	1
:before	p:before	各 e388a4556c0f65e1904146cc1a846bee 要素のコンテンツの前にコンテンツを挿入します。	2
:after	p:after	各 e388a4556c0f65e1904146cc1a846bee 要素のコンテンツの後にコンテンツを挿入します。	2
:root	:root	ドキュメントのルート要素を選択します。	3
:empty	p:empty	子要素を持たないすべての e388a4556c0f65e1904146cc1a846bee 要素 (テキストノードを含む) を選択します。	3
:target	#news:target	現在アクティブな #news 要素を選択します。	3
:not(selector)	:not(p)	e388a4556c0f65e1904146cc1a846bee 要素ではないすべての要素を選択します。	3
:first-child	p:first-child	親要素の最初の子であるすべての e388a4556c0f65e1904146cc1a846bee 要素を選択します。	2




p:first-of-type			:last-of-type
		:only-of-type	p:only-of-type
	:nth-of-type(n)	p:nth-of-type(2)	親の 2 番目の e388a4556c0f65e1904146cc1a846bee 要素に属するすべての e388a4556c0f65e1904146cc1a846bee を選択します。要素。
	:nth-last-of-type(n)	p:nth-last-of-type(2)	上記と同じですが、最後の子要素から数え始めます。

声明：

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

前の記事：Web フロントエンド初心者のメモ: CSS 構造と cascading_html/css_WEB-ITnose次の記事：Web フロントエンド初心者のメモ: CSS 構造と cascading_html/css_WEB-ITnose

続きを見る

CSS3基礎学習 selector_html/css_WEB-ITnose

関連記事