CSS selectors_html/css_WEB-ITnose の詳しい説明

一、类型选择符

什么是类型选择符？指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型，div,p,span都是。
如下：

1. body {}   
2. div {}   
3. p {}   
4. span {}  

 
二、群组选择符

对于XHMTL对象，可以对一组同时进行了相同的样式指派。
使用逗号对选择符进行了分隔，这样书写的优点在于同样的样式只需要书写一次即可，减少代码量，改善CSS代码结构。
使用时应该注意”逗号”是在半角模式下，并非中文全角模式。
如下：

1. h1,h2,h6,p,span   
2. {   
3. font-size:12px;   
4. color:#FF0000;   
5. font-family: arial;   
6. }   
7.    

三、包含选择符
对某对象中的子对象进行样式指点定，这样选择方式就发挥了作用。
需要注意的是，仅对此对象的子对象标签有效，对于其它单独存在或位于此对象以外的子对象，不应用此样式设置。
这样做的优点在于，帮我们避免过多的id、class设置，直接对所需的元素进行定义。
如下：

1. h2 span   
2. {   
3. color:red;   
4. }  

如下：

1. body h1 span strong   
2. {   
3. font-weight:bold;   
4. }  

 
四、id选择符

根据DOM文档对象模型原理所出现的选择符，对于一个XHTML文件，其中的每一个标签都可以使用一个id=”"的形式进行一个名称指派，但需要注意，在一个XHTML文件中id是具有唯一性而不可以重复的。
在div css布局的网页中，可以针对不同的用途进行命名，如头部为header、底部为footer。
XHTML如下：

CSS は次のとおりです:

#content
{
3. font-size:14px; 0%; 5. クラスセレクター
実際、id は XHTML タグの拡張であり、class は複数の SHTML タグの組み合わせです。class の直訳はクラスまたはカテゴリを意味します。
4. XHTML タグの場合、名前の割り当てには class="" を使用します。 ID とは異なり、クラスは同じスタイルの複数の要素をクラスとして直接定義できます。 クラスを使用する利点は、CSS コードの再利用性を反映しており、それぞれにスタイル コードを記述することなく、1 つのスタイルを使用して定義できます。 XHTML は次のとおりです:

CSS は次のとおりです:

2. .
3. background-color
:red;

}

6. タグ固有のセレクター

1. ID とクラスを同時に使用し、タグセレクターも同時に使用したい場合は、次のメソッドを使用できます:
3. h1#content {} /* は、すべての ID を意味しますコンテンツの h1 タグです*/
4. h1.p1 {} /*クラス p1 のすべての h1 タグを表します*/

ラベル固有のセレクターの精度は、ラベル セレクターと ID/クラスの間ですselector between は、一般的に使用されるセレクターの 1 つです。

7. 組み合わせセレクター

上記のすべてのセレクターを組み合わせて使用​​します。以下のように:

1. h1 .p1 {}
2. /*クラス p1 の h1 の下にあるすべてのタグを表します*/
3. #content h1 {}
4. ID
content

h1 を持つタグの下にあるすべての h1 タグを表します.p1,#content h1 {}

/*クラス p1 の h1 の下にあるすべての h1 タグと、id が content のタグの下にあるすべての h1 タグを表します*/

h1#content h2{}

/*id h2 タグ * / コンテンツの h1 タグの下 ########################################### ##### ##########

2. 1. セレクター パターン
パターン/意味/内容の説明
4. *
任意の要素と一致します。 (ユニバーサル セレクター)
E
は、任意の要素 E (たとえば、タイプ E の要素) に一致します。 (型セレクター)
E F
要素 E の子孫要素 F と一致します。 (子孫セレクター)

E > F

要素 E の子要素 ​​F と一致します。 (子セレクター)

E:first-child

要素 E が親の最初の子要素である場合に要素 E と一致します。 (:first-child pseudo-class)

E:link E:visited

E が、ターゲットがまだ訪問されていない (:link) か、訪問されている (:visited) ハイパーリンクのソース アンカーである場合、要素 E と一致します。 。 (リンク擬似クラス) E:active E:hover E:focus

特定のユーザーアクションで E と一致します。 (動的擬似クラス)

E:lang(c)

型 E の要素が (人間の) 言語 c にある場合、その要素と一致します (言語の決定方法はドキュメント言語によって決まります)。 (:lang() 擬似クラス)

E + F

要素 F が直前にある場合、要素 F と一致します。 (近接セレクター)

E[foo]

(その値に関係なく) "foo" 属性が設定されている任意の要素 E と一致します。 (属性セレクター)

E[foo="warning"]

"foo" 属性値が "warning" と厳密に等しい任意の要素 E と一致します。 (属性セレクター)

E[foo~="warning"]

"foo" 属性値がスペースで区切られた値のリストであり、その 1 つが厳密に "warning" に等しい任意の要素 E と一致します。 (属性セレクター)

E[lang|="en"]

"lang" 属性の値が (左から) "en" で始まるリスト E の要素と一致します。 (属性セレクター)

DIV.warning

HTML のみ。使用方法は DIV[class~="warning"] と同じです。 (クラスセレクター)

E#myid

匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)

我们用下面的例子来解释“[s]父元素[/s]”、“[s]子元素[/s]”、“[s]父/子[/s]”及“[s]相邻[/s]”这几个概念。

这是是h1的内容

这是一个段落p的内容！这里是strong的内容这是一个段落p的内容！

上記のコードから、次の関係がわかります:

h1 と p は両方とも div の「子」であり、それぞれ div と「親/子」関係を形成します。

h1,p,strong はすべて div の「子要素」です。 (3 つはすべて div 内に含まれます)

div は h1 と p の「親要素」です。

strong と p は「親/子」関係を形成し、strong の「親要素」は p です。

しかし、strongとdivの関係は「父と子」の関係ではなく、「祖父母と孫」の関係ですが、Strongはdivの「子（孫）要素」であることに変わりはありません。

div は h1 p Strong の「祖先」であり、3 つは div の「子 (孫) 要素」です。

h1 と p は隣接しています。

上記の例を継承して E と F の関係を示します。strong の内容を Green に変更する必要がある場合、どのような方法を使用できますか?

div Strong {color:green;} /* - 正解です。 Strong は div の「子要素」です */

p >strong {color:green;} /* - 正解です。 Strong と p は「親/子」関係です*/

div >strong {color:green;} /* - エラー! Strong は div の「子（孫）要素」ですが、両者は「父と子」の関係ではなく「祖父母と孫」の関係にあるため、> 記号を使用して接続することはできません */

Proximityセレクターとユニバーサル選択 セレクター: ユニバーサル セレクターはアスタリスク「*」で表され、任意のタグの置き換えに使用できます。

例:

h2 + * { color:green }/*h2 の直後の要素内のすべてのテキストは赤色で表示されます*/

2. セレクター分類の概要

1.構文:

* { sRules }

説明:

ワイルドカード セレクター。選択したドキュメント ツリー (DOM) 内のすべてのタイプの単一オブジェクト。

ワイルドカード セレクターが単一セレクターの唯一のコンポーネントではない場合は、「*」を省略できます。

例:

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none; }

2. 構文:

E { sRules }

説明:

タイプセレクター。ドキュメント言語オブジェクト (Element) タイプをセレクターとして使用します。 [ tr ] { sRules }

E [ attr = value ] { sRules }

E [ attr ~= value ] { sRules }

E [ attr |= value ] { sRules }

説明:

属性セレクター。

attr 属性で E を選択します

attr 属性および属性値が value に等しい E を選択します

attr 属性で E を選択し、属性値はスペースで区切られた単語のリストであり、その 1 つが value に等しいです。ここの値にはスペースを含めることはできません

attr 属性を選択すると、属性値は E で始まるハイフンで区切られた単語のリストになります

例:

h[title] { color: blue }

/ * すべての h title 属性を持つオブジェクト*/

span[class=demo] { color: red; }

div[speed="fast"][dorun="no"] { color: red; }

a [rel~= "copyright"] { color:black; }

4. セレクターが含まれます

構文:

E1 E2 { sRules }

説明:

セレクターが含まれます。 E1 に含まれるすべての E2 を選択します。つまり、E1.contains(E2)==true です。

例:

table td { font-size:14px; }

div.sub a { font-size:14px; }

構文:

E1 > E2 { sRules }

説明: サブオブジェクトセレクター。 E2 の子であるすべての E1 を選択します。

例:

[クリップボードにコピー] [ - ]CODE:

body > p { font-size:14px; }

/* body の子オブジェクトであるすべての p オブジェクトのフォント サイズは 14px * /

div ul>lip { font-size:14px; }

6.ID セレクター

構文:

#ID { sRules }

説明:

ID セレクター。ドキュメント ツリー (DOM) 内のオブジェクトの一意の識別子として ID をセレクターとして使用します。

例:

#note { font-size:14px; width:120px;}

7. クラスセレクター

構文:

E.className { sRules }

説明:

クラスセレクター。このセレクターは HTML で使用できます。その効果は E [ class ~= className ] と同等です。 「属性セレクター」を参照してください。

IE5 以降では、スペースで区切られたスタイル シート クラス名のセットを指定することで、オブジェクトのクラス属性 (プロパティ) に複数の値 (className) を指定できます。例:

。

例:

div.note { font-size:14px; }

/* class 属性値が「note」に等しい (を含む) すべての div オブジェクトのフォント サイズは 14px です */

.dream {フォントサイズ: 14px;

/* class 属性値が「note」と等しい (note を含む) すべてのオブジェクトのフォント サイズは 14px です */

8. セレクターのグループ化

構文:

E1, E2, E3 { sRules }

説明:

セレクターのグループ化。同じ定義を複数のセレクターに適用するには、セレクターをカンマ区切りのグループに結合します。

例:

.td1,div a,body { font-size:14px; }

td,div,a { font-size:14px;

9.

構文:

E : 疑似クラス { sRules }

E : 疑似要素 { sRules }

説明:

疑似クラスおよび疑似オブジェクトのセレクター。

疑似クラスセレクター。疑似クラス[:link :hover :active :visited :focus :first-child :first :left :right :lang]を参照してください。

疑似オブジェクトセレクター。 「疑似要素[:first-letter:first-line:before:after]」を参照してください。

例:

div:first-letter { font-size:14px; }

声明：

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