すべての CSS selectors の詳細説明_html/css_WEB-ITnose-htmlチュートリアル-php.cn

すべての CSS selectors の詳細説明_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:31:55

オリジナル

1438 人が閲覧しました

-----------------------------------------------------
CSSセレクター
- - --------------------------------------

1、組み合わせセレクター:
1) e> f: 直系子孫セレクター。
2) e+f: 兄弟要素セレクター。e 要素の直後にある兄弟要素 f と一致します。
3) e~f: e 要素の後の兄弟 f 要素と一致します。
4) e f : 子孫セレクター。
5) e,f: グループセレクター。
説明: + と ~ の違い、+ は直後の兄弟要素 1 つとのみ一致します; ~ は後続のすべての兄弟要素と一致します

2、属性セレクター:

1) e[att] は att 属性を持つすべての e 要素と一致します。 ) e[att=val] は、att=val を持つすべての e 要素と一致します。 3) e[att~=val] は、複数のスペースで区切られた値を持つすべての att 属性と一致します。そのうちの 1 つの E 要素は "val" に等しいです。
ケース:

ssssssssssss

p[data~='vic']{background-color: maroon;}
4) e [att|=val] はすべての E 要素と一致しますatt 属性にはハイフンで区切られた複数の値があり、そのうちの 1 つは "val" で始まります。これは主に "en" や "en-us"、"en-gb" などの lang 属性に使用されます。
case:

bbbbbbbbbbb

p[lang|='en']{背景色: 黄色;}
5) e[att^= val] 属性の値が「val」で始まる要素;
case:

bbbbbbbbbb

p[data^='vic ']{background-color: blue};
6) e[att$=val] 属性 att 値が "val" で終わる要素;
case:
< ;p data="ccvic">aaaaaaaaaaa

p[data$='vic']{背景色: 赤};
7) e[att*=val]
case:

aaaaaaaaaaa

bbbbbbbbbbbb

cccccccccc

sssssssssss

p[data*='vic']{background-color: red};

3、疑似クラスセレクター:
< ;ul>

find

マーズ

セレナ

ビクター

ピンク< /li>

1) 最初に-子: 親要素の最初の子要素と一致します
ul li:first-child{color:red;}
2) リンク: すべてのクリックされていない要素と一致します
3) 訪問済み: すべてのクリックされたリンクと一致します
4) アクティブ:マウスが押されているが放されていない E 要素と一致します
5) hover: マウスがホバーしている E 要素と一致します
< ;a href="#">
a {text-decoration: none}
a:link{color: green;}
a:visited{color: maroon;}
a:active{color: red;}
a:hover{color: blue;}
6) focus: 現在のフォーカスを受け取った E 要素と一致します;

input[type='text']:focus{outline :1px sold yellow;}
------ -------------------------------------- ---------- -------------------
7) lang(): lang 属性が c;
に等しい E 要素と一致するこれは、スティーブジョブズの言葉を引用したものです。デザインとは、見た目や感触だけではありません。インスピレーションのためのものです。{
content: open-quote;
}

q:after {

content: close-quote;

/* 英語の引用符 */

:lang(en) q {

quotes: '201C' '201D' '2018' ' 2019'; /* Unicode 値特別な引用符文字を指定するために使用されます */
}

/* フランス語の引用符 */
:lang(fr) q {
quotes: '«' '»' '‹' '›' ;
}

/ * ドイツ語の引用符 */
:lang(de) q {
引用符: '»' '«' '‹' '›';
}

------------- ----- -------------------------------------- ----- --------

4、要素の場合:
1) first-line: 要素の最初の行と一致します
2) first-letter: 要素の最初の文字と一致します
3) 前:生成されたコンテンツを E 要素の前に挿入します。

4) 後: 生成されたコンテンツを E 要素の後に挿入します。

1) 有効: フォーム内のアクティブ化された要素と一致します。 ) 無効: フォーム内の無効な要素と一致します
3) チェック済み: フォーム内の選択されたラジオ (ラジオボタン) またはチェックボックス (チェックボックス) 要素と一致します
4) 選択: ユーザーが現在選択している要素と一致します: この疑似要素はcolor、background-color、background（背景色部分）、text-shadowに適用されます。
ケース:
p::selection{color: yellow;}

6、css3 の構造擬似クラス。
1) root: ドキュメントのルート要素と一致します。HTML ドキュメントの場合、それは HTML 要素です。 2) nth-child(n): その n 番目の子要素と一致します。親要素、最初の番号は 1 です。
3) nth-last-child(n): nth-child() に似ていますが、同じタグを使用する要素のみに一致します。
4) nth-of-type(n) : :nth-last-child() に似ていますが、同じタグを使用する要素のみに一致します
5) nth-last-of-type(n): 親要素の最後の子要素に一致します。:nth-last と同等です。 -child(1)
6)last-child
7)first-of-type
8)last-of-type
9)only-child
10)only-of-type
11)empty