CSS がセレクターを征服する 1_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS がセレクターを征服する 1_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:25:10

オリジナル

1067 人が閲覧しました

Selectors (セレクター)

--------------CSS の学習については MDN を参照してください。

まず、CSS セレクターはたくさんありますが、一般的には次の 2 つのタイプがあります:

ラベルセレクター (* は特殊なケース)。単一のラベルまたはコンテキストに応じた複数のラベルにすることができます。
属性セレクター (id;およびクラス) これらはすべて属性であり、特別な属性です);

タグセレクター ~ 単一タグ

は、この単一タグの名前を参照して、 の操作などのスタイル操作を実行できます。この HTML 値のタグ。

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style.css"> </head> <body> Cascading Style Sheets </body></html>
ログイン後にコピー

CSS ファイル内でそのタグを使用して、文字を赤色にするなど、タグ内の属性に対してスタイル操作を実行します。

strong { color: red;}
ログイン後にコピー

タグセレクター ~ マルチタブ

公式バージョン
B + E 次の兄弟要素 E任意の要素 B の共通の親要素を持つ B 要素の後の兄弟要素 E div p などの祖先のすべての子孫ノードを選択します{…} div > p{…} などの親要素の直接ノードをすべて選択します li + li{…} などの要素の隣の兄弟ノードを選択します特定の要素のすべての兄弟ノードを選択します例:span ~ a{…}

セレクター 選択された要素

A E 要素 A の子孫である任意の要素E (子孫ノードとは、A の子ノード、子ノードの子ノードなどを指します)

A > 最初の子要素 E
B ~ E
よくある説明

上記の状況を組み合わせたアプリケーション (組み合わせを複雑にしすぎないでください。コーディングは読みやすさを第一に考えてください)

以下に示すように、典型的なアプリケーションをリストします

上の図の効果はより一般的であるはずで、各メニューの間に下線を引いてください。私の以前の実装は、各 li に border-bottom を追加し、最後の li の border-bottom を削除するというものでした。

実際には、それほど面倒なことは必要ありません。次のスタイル設定で解決できます。
属性セレクター ~

最初に行うのは、もちろん、class と id の 2 つの強力なプレーヤーです

(クラスセレクター)

要素の class 属性を設定することで、要素のクラス名を指定できます要素。クラス名は開発者自身が指定します。ドキュメント内の複数の要素が同じクラス名を持つことができます。

スタイルシートを記述する場合、クラスセレクターは英語のピリオド (.) で始まります。

(ID セレクター)

id 属性を設定して要素の ID を指定します。 ID名は開発者が指定します。各 ID はドキュメント内で一意である必要があります。

スタイルシートを記述する場合、IDセレクターは#で始まります。

例を見てみましょう:
ul li+li{ border-top: 1px solid #ccc;}
ログイン後にコピー


ログイン後にコピー

上記の p タグには class 属性と id 属性の両方があります

CSS の ID セレクタープリンシパルは一意である必要がありますが、クラスセレクターは一意である必要があります。他のタグと併用タグ内のキーは同じなので、複数のタグを同時に操作できます。

.key { color: green;}#principal { font-weight: bolder;}
ログイン後にコピー

例: クラスセレクターと ID セレクターを使用して HTML ファイルを作成する

style1.css を作成する

你也可以将多个选择器组合起来构成更确定的选择器。比如，选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的 元素。除了class 和 id，你还可以用方括号的形式指定其他属性。比如，选择器 [type='button'] 选中所有 type 属性为 button 的元素
ログイン後にコピー

<!doctype html><html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> Cascading Style Sheets Cascading Style Sheets </body></html> 
ログイン後にコピー

3. ファイルを保存し、ブラウザを使用して実行します

スタイル内のルールの順序を再編成すると、これらのルールの順序を変更しても最終的な効果に影響しないことがわかります。

クラスセレクター .キャロットおよび .スピナッチは、タグセレクター Strong よりも高い優先順位を持ちます。

ID セレクター #first は、クラスセレクターやタグセレクターよりも優先されます。

終わり:

最初の記事でこれらを記録しましょう。疑似クラスと疑似要素については、後で個人的によく理解していないので、最初に勉強してまとめます。

ブログを始めたばかりなので、まだまだリズムに問題があると感じています。漏れがあれば先輩方にアドバイスをいただき謙虚に勉強させていただきますのでよろしくお願いします。

セレクター	選択された要素
A E	要素 A の子孫である任意の要素E (子孫ノードとは、A の子ノード、子ノードの子ノードなどを指します)
A > 最初の子要素 E
	B ~ E
	よくある説明

CSS がセレクターを征服する 1_html/css_WEB-ITnose

Selectors (セレクター)

上記の p タグには class 属性と id 属性の両方があります

クラス セレクター .キャロット および .スピナッチは、タグ セレクター Strong よりも高い優先順位を持ちます。

ID セレクター #first は、クラス セレクターやタグ セレクターよりも優先されます。

クラスセレクター .キャロットおよび .スピナッチは、タグセレクター Strong よりも高い優先順位を持ちます。

ID セレクター #first は、クラスセレクターやタグセレクターよりも優先されます。