基本セレクター
1. ワイルドカード セレクター (*) — すべてのブラウザーでサポートされます
*{ marigin: 0; padding: 0; }
2. 要素セレクター (E) — すべてのブラウザーでサポートされます
3.クラスセレクター ( .className) — すべてのブラウザでサポート
4. ID セレクター (#ID) — すべてのブラウザでサポート
5. 子孫セレクター (E F) — すべてのブラウザでサポート
descendantF 要素 をすべて選択
6. 子要素セレクター (E>F) - IE6 は をサポートしていません。
隣接する 子要素 を選択します。兄弟要素セレクター (E + F) - IE6 は
EF の 2 つの要素が同じ親要素を持ち、F 要素が EF 要素の後ろに隣接していることをサポートしません。 ユニバーサル兄弟選択セレクター (E ~ F)。 — IE6 は
要素の背後にあるすべての兄弟要素を選択します
9. グループ セレクター (selector1、selector2、...、selectorN)
Every セレクターを区切るにはカンマ「,」を使用します
属性セレクター
IE6 は
E[attr]: 属性名のみが使用されますが、属性値は決定されません
E[attr=" value"]: 属性名を指定し、属性の属性値を指定します。 E[attr~="value"]
: 属性名を指定し、属性値を指定します。この属性値は、スペースで区切られた単語リストです。 E[attr="value"] と E[attr~="value"] の違い: 属性 チルダ (~ がある場合) ) セレクター内で、属性値に value がある場合に一致します。チルダ (~) がない場合、属性値が完全に value である必要がある場合に一致します。
E[attr^="value"]
E[attr$="value"]
: 属性。名前が指定され、属性値があり、属性値が value で終わる E[attr*="value"]: 属性名が指定され、属性値があり、属性値が存在します。 value を含む;
E[attr|="value"]: 属性名が指定され、属性値は value または「value-」で始まる値 (zh-cn など);
Pseudo -class selector
1. 動的疑似クラス :hover については、IE6 では a 要素のみがサポートされ、:active は IE6-7 でのみサポートされ、:focus は IE6-7 ではサポートされません。
.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
フォーカスになる要素の :focus もあります。フォーム要素でよく使用されます。
2. UI 要素のステータス疑似クラスIE6-8 は
":enabled"、":disabled"、":checked" をサポートしていません。主に HTML
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
3 の Form 要素操作用です。 :nth セレクター
:first-child
は要素の最初の子要素を選択します;:last-child
は要素の最後の子要素を選択します :nth-child( n)
1 つを選択します。要素のより具体的な子要素は、IE6 ~ 8 および FF3 ブラウザでは「:nth-child」セレクターをサポートしません。 n は整数、式、またはキーワードです。
整数: :nth-child(3) など、特定の要素の下の 3 番目の子要素を選択します。 +1、n は 0 から始まります。ここでの n は n のみであり、他の文字に変更することはできません。 :nth-last-child()
特定の要素を選択します。この要素の最後の子要素から始まる子要素。 :nth-of-type()
:nth-of-type は:nth-child と似ています。唯一の違いは次のとおりです。このメソッドは要素のタイプを指定します。
:nth-last-of-type()
最後の要素から数えて、指定された要素を選択します。:first-of-type
同じ要素の最初の子要素を選択します。上位要素の下にある型; 2 つのセレクター: first-of-type と :last-of-type は、first-child と :last-child に似ています。違いは、要素の型を指定するだけです。
:last-of-type 親要素の最後の類似する子要素を選択します。
:only-child
選択された要素は、その親要素の唯一の要素です。":only-child"表示的是一个元素是它的父元素的唯一一个子元素
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
:empty选择的元素里面没有任何内容。
:empty是用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格;
3、否定选择器(:not) IE6-8浏览器不支持
input:not([type="submit"]) {border: 1px solid red;}
4、伪元素
两个“::”和一个“:”css3中主要用来区分伪类和伪元素,到目前来说,这两种方式都是被接受的,也就是说不管使用哪种写法所起的作用都是一样的,只是一个书写格式不同而以。
::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式;
::first-letter选择文本块的第一个字母,除非在同一行里面包含一些其它元素,不过这个主要运用于段落排版上多,比如说首字下沉;
::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动;
::selection 用来改变浏览网页选中文的默认效果;
/*Webkit,Opera9.5+,Ie9+*/ ::selection { background: 颜色值; color:颜色值; } /*Mozilla Firefox*/ ::-moz-selection { background: 颜色值; color:颜色值; }
“::selection”只能设置两个属性,一个就是background,另一个就是color属性,设置其他属性是没有任何效果的。
参考:http://www.w3cplus.com/css3/basic-selectors