CSSセレクター(CSS2)_html/css_WEB-ITnose

ルール構造

すべてのルールには、セレクターと宣言ブロックという 2 つの基本的な部分があります。宣言ブロックは 1 つ以上の宣言で構成され、各宣言は属性と値のペアです。各スタイル シートは一連のルールで構成されます。

h1{color: red;background: yellow;}

セレクター分類

[0] ワイルドカード セレクター
アスタリスク * は、任意の要素に一致するワイルドカード セレクターを表します

*{color: red;}

[ 1] 要素セレクター

の要素ドキュメントは最も基本的なセレクターです

html{color: black;}p{color: gray;}h2{color: silver;}    

【2】クラスセレクター(要素の集合)

.div{color: red;}

【2.1】複数のクラスセレクター

.div1.div2{color: red;}

【 2.2] クラスセレクターと組み合わせ要素

p.div{color: red;}

【3】ID セレクター (1 つの要素)

#test{color: red;}

[注意] 実際には、ブラウザは ID の一意性をチェックしません。複数の ID を設定することで、同じ ID を持つこれらの要素には同じスタイルを適用しますが、DOM スクリプトを作成するときに認識されるのは、その ID を持つ最初の要素のみです。

【4】属性セレクター（IE6非対応） 属性と属性値に基づいて要素を選択する

【4.1】単純な属性セレクター

h1[class]{color: red;}img[alt]{color: red;}a[href][title]{color: red;}#div[class]{color: red;}.box[id]{color: red;}[class]{color: red;}

【4.2】特定の属性セレクター

[class="test box"]{color: red;}

[注] クラス内の値と順序は完全に同じである必要があり、スペースを増減することはできません

[id="tox"]{color: red;}    

[注] id 属性を指定する ID セレクターと属性セレクターは、重要なのは、優先順位が異なるということです。

a[href="http://www.baidu.com"][title="baidu"] {color: red;}    

【4.3】部分属性セレクター

[class ~="b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素    [class ^="b"] 选择class属性值以"b"开头的所有元素[class $="b"] 选择class属性值以"b"结尾的所有元素[class *="b"] 选择class属性值包含"b"的所有元素    [class |="b"] 选择class属性值等于b或以b-开头的所有元素

【5】グループセレクター

グループ化するセレクターをルールの左側に配置し、カンマで区切ります

りー

【6】子孫セレクター

h1,p{color: red;}

【6.1】子要素セレクター(IE6非対応)

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

【7】隣接兄弟要素セレクター(IE6非サポート)

りー

[注意] 2つの要素間のテキスト内容は、隣接する兄弟の組み合わせには影響しません

【8】擬似クラスセレクター 擬似クラス順序: link-visited-focus-hover-active
【 8.1】静的擬似クラス(ハイパーリンクのみに適用)

ul > li{color: red;}

【8.2】動的擬似クラス(任意の要素に適用可能)

div + p{color: red;}    

【8.3】: first-child(static Pseudoクラスに属する) ) (IE6-未サポート)

:link    未访问:visited    已访问a:link{color: red;}a:visited{color: green;}

【8.4】: lang は |= 属性セレクターと同等 (IE7-未サポート)

:focus    拥有焦点(IE7-不支持):hover    鼠标停留(IE6-不支持给<a>以外的其他元素设置伪类):active    正被点击(IE7-不支持给<a>以外的其他元素设置伪类)

【8.5】擬似クラスの組み合わせ

p:first-child    代表的并不是<p>的第一个子元素，而是<p>元素是某元素的第一个子元素p > i:first-child    匹配所有<p>元素中的第一个<i>元素p:first-child i 匹配所有作为第一个子元素的<p>元素中的所有<i>元素

[ 注意 ]順序は関係ありません

【9】疑似要素セレクター 9.1】: first-letter は最初の文字のスタイルを設定します (ブロックレベルの要素にのみ使用できます) (IE6 はサポートされていません)

p:lang(en) 匹配语言为"en"的<p>

【 9.2】: first-line は最初の行のスタイルを設定します (ブロックレベルの要素にのみ使用できます) (IE6- サポートされていません)

a:visited:hover:first-child{color: black;}

【9.3】:before 要素のコンテンツの前にコンテンツを挿入します (IE7-サポートされていません)

p:first-letter{color: red;}    

【9.4】:after 要素コンテンツの後にコンテンツを挿入します (IE7-非サポート)

p:first-line{color: red;}    

[注意] すべての疑似要素は、疑似要素が配置されているセレクターの最後に配置する必要があります。という要素が現れます。したがって、em

の前に p: を記述することは違法です。