Kidney 独自のバージョンの CSS チュートリアル 第 1 章 Selector_html/css_WEB-ITnose

第 1 章 セレクター

バージョン	アップデート	注記
1.0	2016-5-28	初めて追加。コメントの間違いを指摘していただければ、確認後すぐに修正され、投稿者に通知されます。

   

 

 

 

图例：CSS3以前版本    CSS3中浏览器普遍支持的属性    CSS3中未被普遍支持的属性

1、元素选择器

1.1 *

　　通配符，表示所有元素

1.2 element

2、class和id

2.1 .className

2.2 #id

　　在单个文档中指定唯一的元素。

　　id可用于锚链接。例如：

　　click me

　　

　　点击click me，页面会跳转到锚链接的位置，并且文档的url后添加了#hi

　　file:///C:/Users/kidney/Desktop/demo.html#hi

　　此时div成为了目标元素，可以被div:target伪类选中。

3、关系选择器

3.1 E F

　　选择E后代中所有的F

3.2 E>F

　　选择E直接子代中所有的F

3.3 E~F

　　选择E兄弟元素中所有的F

3.4 E+F

　　选择紧跟E后面的兄弟元素F

4、属性选择器

4.1 selector[attrName]、selector[attrName = "value "]

　　这是基本格式。attrName可以是自定义属性。

4.2 ~=

　　选择属性值中包含指定value的元素，value指向一个完整的单词。~=表示"含有"。

4.3 *=

　　选择属性值中包含指定value的字符串的元素。

　　

　　div[*= "a"]  //有效

　　div[*= "ef"]  //有效

4.4 ^=

　　选择属性值为以指定value开头字符串的元素。^=表示"以…开头"。

　　注意：只针对第一个属性值。例如：

　　

　　div[name ^= "ab"]  //有效

　　div[name ^= "de"]  //无效

　　下同。

4.5 $=

　　选择属性值为以指定value结尾字符串的元素。$=表示"以…结尾"。

4.6 |=

　　选择属性值为以指定value开头且用-分隔的字符串的元素。

　　

　　div[name |= "ab"]  //有效

　　div[name |= "a"]  //无效

　　div[name |= "de"]  //无效

5、伪类选择器

5.1 子元素序列

       E:first-child  E:last-child  E:nth-child(n)  E:nth-last-child(n)  E:only-child

       E:first-of-type  E:last-of-type  E:nth-of-type(n)  E:nth-last-of-type(n)  E:only-of-type

       nth-child(n)中的n可以是正整数、关键字even（偶）和odd（奇）和含n表达式如2n、2n+1、3n-2等。n是以1、2、3 … 的方式递增的，如果计算出的值小于等于0，会被自动忽略。nth-last-child(n)只是从子元素序列倒着数，别无二致。

　　这里所谓子元素，仅仅是要求E必须具备父元素，从用法来看它们更像是兄弟元素的选择器。-child是这样解析的：首先在同级元素中找到第n个元素，然后看该元素是否与E相匹配。匹配，则选择成功，不匹配，则丢弃。-type解析的方式刚好相反，首先在同级元素中找到所有匹配E的元素，然后再在其中选择第n个。

　　:only-child的解析规则是如果E是父元素唯一的子元素，则匹配成功；:only-of-type的解析规则是E是父元素唯一的该类（element type）子元素，则匹配成功。

　　

　　   

 　　  

　　

p:only-child //Invalid

p:only-of-type //Valid

5.2 以下の要素はありません

:empty は子孫を選択しません（テキストノード、プレースホルダー、スペースを含む））空の要素。

p:empty //無効、交差する行はスペースを意味し、スペースもテキストノードに属します

5.3 ハイパーリンク愛と憎しみの四紳士

:link :visited :hover :active

それぞれ、アクセス、訪問、マウスホバー、クリック前の a 要素のステータスを表します。最初の文字を抽出するという順序で設定する必要があります。これは love&hate と省略できます。

:hover は、あらゆる要素の hover イベントで広く使用されます。

5.4 フォームステータス

:focus は、テキストボックスが入力カーソルイベントを取得することを意味します。

:checkedはラジオボタンやチェックボックスの選択されたイベントを表します。

:enabled は、フォーム要素が利用可能な状態であることを示します。

:disabled はフォーム要素が無効な状態であることを示します。

5.5 Exclude

E:not(S) は、E 要素集合の中から S セレクターに一致する要素を除いた残りの要素を意味します。

6. 疑似オブジェクトセレクター (疑似要素とも呼ばれます)

6.1 E::before E::after

CSS3 では、疑似クラスと区別するために二重コロンが使用されますが、単一コロンが使用されます。もサポートされています。

before と after は、E のコンテンツの前後に新しいコンテンツを生成するために使用されます。

それらの使用法は、単に最初と最後にテキストコンテンツを追加するだけでなく、ほぼすべての新しい HTML 構造を生成するために使用できます。

6.2 E::first-letter E::first-line

これらはブロックレベルの要素にのみ適用されます。

最初の文字は、従来の印刷メディアでテキストのドロップキャップ効果を設定するためによく使用されます。

6.3 E::selection

テキストが選択されているときのスタイルを設定するために使用されます。

6.4 E::input-placeholder E::placeholder

フォーム内のプレースホルダーテキストのスタイルを設定するために使用されます。ブラウザのプレフィックスが必要です。

Firefox だけがプレースホルダーを使用し、他のブラウザは input-placeholder を使用します

7. セレクターレベル CCS の正式名称は Cascading Style Sheets で、その「カスケード」はセレクターの優先順位に反映されます。優先度は低い優先度をオーバーライドします。優先順位は「仕様」に基づいており、次の 3 つの手順に従います。

1. ステートメントのソース

ユーザーの重要なステートメント > ブラウザーのデフォルトのステートメント

2. 開発者のステートメントでは、

累積体重値

タイプ (高いものから低いものへ) を通じて優先順位を決定します 1. 内部スタイルシート（

体重	説明	重要 スタイル
IDセレクター	と疑似オブジェクト	1
	ワイルドカード	0
	継承	なし
比類のない0はまだ小さい	3. 累積重み値が同じ場合は、その順序に従います 順序によって優先順位が決まります