CSSでのセレクタ(メモ)

1、ワイルドカードセレクタ(*):ワイルドカードセレクタは、すべての要素を選択するために使用されます.また、ある要素の下にあるすべての要素を選択することもできます.すべてのブラウザでワイルドカードセレクタがサポートされています.

*{margin: 0; padding: 0;}
 .dome *{padding: 2px;}

 
2、要素セレクタ(Ele):要素セレクタはcssセレクタの中で最もよく見られる最も基本的なセレクタであり、要素セレクタはhtml、body、divなどのドキュメントの要素である.すべてのブラウザで要素セレクタがサポートされています.

li{color:#ddd;}

 
3、クラスセレクタ(.className):クラスセレクタはドキュメント要素とは独立した方法でスタイルを指定し、クラスセレクタを使用する前にhtmlタグに存在することを保証する必要があります.すべてのブラウザでクラスセレクタがサポートされていますが、マルチクラスセレクタはIE 6でサポートされていません.

/*    */

.className{margin:10px;}



/*     ，         .one .two    html      */

.one.two{margin:10px;}

 
4、IDセレクタ(#idName):IDセレクタを使用する前にhtmlドキュメントにID名を注記する必要があります.すべてのブラウザでIDセレクタがサポートされています.

/*ID   */

#IDname{margin:10px;}

 
5、子孫セレクタ:子孫セレクタが機能するのは、ある要素を選択できる子孫要素です.すべてのブラウザでは、子孫セレクタがサポートされています.

/*      ID one        span      )*/

(#one span{margin:10px}

 
6、サブエレメントセレクタ:サブエレメントセレクタは、エレメントのサブエレメントを選択します.IE 6ではサブエレメントセレクタはサポートされていません.

/*      (ID one          two       )*/

#one > .two{margin:10px;} 

 
7、隣接兄弟要素セレクタ:隣接兄弟セレクタは、別の要素の直後の要素を選択し、同じ親要素を持つことができます.IE 6はこのセレクタをサポートしていない.

/*         (.two     span     ，  .two span     )*/

.two+span{margin:10px;}

 
8、通用兄弟選択器:これはCSS 3の新しい選択器で、この選択器はある要素の後ろのすべての兄弟要素を選択する.IE 6はこのセレクタをサポートしていない.

/*       (.two     span  ，  .two span     )*/

.two~span{margin:10px;}

 
9、群集セレクタ:群集セレクタは、同じスタイルの要素をグループ化し、各セレクタ間でカンマで区切られます.すべてのブラウザでグループセレクタがサポートされています.

/*     ，ID one two      */

#one, #two{margin:10px;}

 
10、属性セレクタ:属性セレクタの主な役割は、指定された属性を持つHTML要素にスタイルを設定することです.プロパティ・セレクタには、次のような方法があります.
①Ele[attr]:属性名のみ使用しますが、属性値は決定されません.IE 6はこのセレクタをサポートしていない.

/*    id   a     。*/

a[id]{margin:10px;}



/*    id   title   a     。*/

div[id][title]{margin:10px;}

 
②Ele[attr="value":属性名を指定し、その属性の値を指定します.IE 6ブラウザではこのセレクタはサポートされていません.

/*ID  one div    */

div[id=’one’]{margin:10px;}

 
③Ele[attr~="value":この属性セレクタの属性値は1つの生きている複数の語のリストであり、リストである場合、属性値のうち1つのvalueが一致する限り、その要素を選択するにはスペースで区切る必要があります.IE 6ブラウザではこのセレクタはサポートされていません.

/*<div title=”my name is csh”></div>       div  */

div[title~=”csh”]{margin:10px;}

 
④Ele[attr^="value"):属性名が指定され、valueで始まる属性値があります.IE 6ブラウザではこのセレクタはサポートされていません.

/*<a href=”http://baidu.com”></a>       a  */ 

a[href^=”http://”]{margin:10px;}

 
⑤Ele[attr$="value"):属性名が指定され、属性値があり、属性値はvalueで終了します.IE 6はこのセレクタをサポートしていない. 

/*<a href=”http://baidu.com/my.jpg”></a>       a  */

 a[href$=”jpg”]{margin:10px;}

 
⑥Ele[attr*="value"):属性名が指定され、属性値があり、属値にvalueが含まれています.IE 6はこのセレクタをサポートしていない.

/*<div title=”mynamecsh”></div>       div  */

div[title=”name”]{margin:10px;}

 
11、擬似クラスセレクタ:CSSの擬似クラス構文と他の構文は少し違います:E:pseudo-class{property:value}ここのEはhtmlラベル、ラベルのID名とclassで、pseudo-classは擬似クラスの名前で、propertyはCSSの属性で、valueはCSSの属性値です.

a:link{margin: 10px;}

 
1動的擬似クラス:これらの擬似クラスは,ユーザとウェブサイトが互いに交際している場合にのみ現れる.これらの擬似クラスには、link(リンクがアクセスされていないスタイル)、:visited(リンクがアクセスされた後のスタイル)、:hover(リンクにマウスが移動するスタイル)、:active(マウスポイントでリンクをアクティブにすると生成されるスタイル)、focus(要素がフォーカスされるのは生成されるスタイル)があります.最初の4つのアンカー偽クラスの設定には、link-visited-hover-activeという優先順位に特に注意する必要があります.順番を間違えると、思いがけない間違いをもたらします.場合:hoverはIE 6でa要素のみサポートされ、:activeではIE 7-6のみサポートされず、focusではIE 6-7でサポートされていません.
 
②: first-child、このセレクタは、ある要素セットの最初の要素を選択するために使用されます.IE 6はこのセレクタをサポートしていない.

/*          li  */

li:first-child{margin:10px;}

 
③: last-child、このセレクタは、ある要素セットの最後の要素を選択するために使用されます.IE 6はこのセレクタをサポートしていない.

/*           li  */

li:last-child{margin:10px;}

 
12、CSSセレクタの最適化:まず、ブラウザがどのようにセレクタを読み取り、スタイルを識別し、対応するスタイルを対応するHTML要素に添付するかを明らかにする必要があります(ブラウザはあなたのセレクタを読み取り、原則としてセレクタの右から左へ、つまりブラウザがセレクタを読み取る順序は右から左へ行います.

/*，           HTML       a[title]  ，     .nav div。*/

div .nav a[title]{margin:10px;}

 
13、セレクタには固有の効率がある:1 idセレクタ(#id).②クラスセレクタ(.nav).③ラベルセレクタ(div,span).④隣接セレクタ(h 1+p).⑤サブセレクタ(ul>li).⑥子孫セレクタ(li a).⑦ワイルドカードセレクタ(*).⑧属性セレクタ(a[title='my']).⑨擬似クラスセレクタ(a:hover).この9種類のセレクタの効率は①−⑨からであり,そのうちIDセレクタの効率が最も高く,擬似セレクタの効率が最も低い.
 
14、セレクタの優先度:セレクタの優先度は3つのレベルa=100、b=10、c=1に分けられる.IDセレクタ(#one)は、a=100、クラス(class)または擬似クラス(a:link)または属性セレクタ(div[title])はb=10、要素セレクタ(div、p)または擬似要素セレクタ(a)はc=1に等しい.セレクタのレベルの和が高いほど、このセレクタの優先度が高くなります.
ケース:セレクタのレベル数が大きいほど、セレクタの優先度が高くなります.

<div id="one">



  <div class="two">



      <p>       ？</p>



  </div>



</div>



 



#one{...} /*       100*/



#one .two{...}/*       110*/



#one .two p{...}/*       111*/