CSS 3セレクタメモ

IE 8対応のプロジェクトをしたばかりなので、振り返ってみるとhtml 5とcss 3はまるでIEがこの世界から消えてしまいたい
騒ぎが終わったらcss 3の基礎知識(セレクタ)を見てみましょう
1、*:汎用要素セレクタ*セレクタはページ上のすべての要素を選択し、上のコード作用はすべての要素のmarginとpaddingを0に設定し、最も基本的なデフォルトCSSスタイルをクリアする方法である.

* {  
 margin: 0;  
 padding: 0;  
}

これが私たちがサボっている間にスタイル属性をフォーマットする書き方です
*セレクタは、次のようなサブセレクタにも適用できます.

#container * {  
 border: 1px solid black;  
}

このようにIDがcontainerのすべてのサブラベル要素が選択され、borderが設定されます.
2、#ID:IDセレクタ

#container {  
   width: 960px;  
   margin: auto;  
}

IDセレクタはCSSで最も効率の高いセレクタであり、使用時にIDの一意性を保証する
3、.class:クラスセレクタ

.error {  
  color: red;  
}

クラスセレクタの効率はIDセレクタより低く、1ページに複数のclassがあり、classは異なるラベルで使用できます.
4、X Y:ラベルコンビネーションセレクタ

li a {  
  text-decoration: none;  
}

ラベルコンビネーションセレクタも一般的なセレクタです.セレクタ間は関係を含む
5、X:visited and X:link擬似クラスセレクタ

a:link { color: red; }  
a:visted { color: purple; }

疑似クラスセレクタ、最もよく使われるのはAラベルです.よくあるのはマウス通過効果(a:hover)
6、X+Y:隣接要素選択器

ul + p {  
   color: red;  
}

隣接するエレメントセレクタは、Xエレメントに続くすべての兄弟エレメントYに一致します.
7、X>Y:サブエレメントセレクタ

div#container > ul {  
  border: 1px solid black;  
}

#containerの下のすべてのサブ要素【第1層(息子)】を一致させる.
8、X ~ Y:

ul ~ p {  
   color: red;  
}

X要素の後にある任意の同級Y要素を一致させます.つまり、ULの後の同級のすべてのp要素が選択された
9、X[title]:属性選択器

a[title] {  
   color: green;  
}

インスタンスでtitle属性を持つaラベルを一致させるなど、属性を持つラベルを一致させる
10、X[href=”foo”]

a[href="http://js8.in"] {  
  color: #1f6053; /* nettuts green */  
}

属性セレクタにも属し、属性内の値のラベルに一致します.たとえば、インスタンスで一致するのはhref=」http://js8.in」のaラベルを選択しますが、他のリンクのaラベルは選択しません.
11、X[href*=”nettuts”]

a[href*="tuts"] {  
  color: #1f6053; /* nettuts green */  
}

プロパティセレクタに属し、href内のtutsを含むすべてのラベルに一致します.正規一致
12、X[href^=”http”]

a[href^="http"] {  
   background: url(path/to/external/icon.png) no-repeat;  
   padding-left: 10px;  
}

上の属相選択ラベルと似ていますが、httpで始まるAラベルに一致し、正則的に一致します.
12、X[href$=”.jpg”]

a[href$=".jpg"] {  
   color: red;  
}

属性に一致する.jpgの末尾のラベルは、正則的に一致し、属性セレクタの一種でもある.
13、X[data-*="foo"]カスタム属性すべてのピクチャリンクに一致する場合は、次のCSSで実現できます.

a[href$=".jpg"],  
a[href$=".jpeg"],  
a[href$=".png"],  
a[href$=".gif"] {  
   color: red;  
}

しかし、aラベルにdata-filetypeプロパティを追加すると、次のCSSを使用して、一致するラベルを迅速に選択することができます.

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

カスタムプロパティを使用して、対応するラベルを見つけることができます.

a[data-filetype="image"] {  
   color: red;  
}

14、X[foo~=”bar”]

<a href="#" data-names="whq wyn wzc">a>

a[data-names~=whq]{
    color='ff0000';
}
a[data-names~=wyn]{
    background-color='#888'
}

attr属性を選択し、valを含む属性値を持つE要素を選択します.この属性値はスペースで区切らなければなりません.
15、X:checked

input[type=radio]:checked {  
   border: 1px solid black;  
}

このセレクタは主にcheckboxに使用され、checkboxを現在選択されているラベルに選択します.
16、X:after

        
.clearfix:after {  
    content: "";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    font-size: 0;  
    height: 0;  
    }  

beforeとafterは、選択したラベルの(奥)の前または後に内容を挿入し、一般的にフローティングをクリアするために使用されますが、IE 6、IE 7では使用できません.
17、X:hover

div:hover {  
  background: #e3e3e3;  
}

最もよく使われるのはAタグですが、IE 6ブラウザではAタグ以外のタグdiv:hoverが一致しません.
18、X:not(selector)

*:not(p) {  
  color: green;  
}

()のセレクタ以外のラベル要素を選択します.
19、X::pseudoElementは、要素の最初の行と最初のアルファベットを一致させるために使用されます.例を見てください.

p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
}  

p::first-letter {  
   float: left;  
   font-size: 2em;  
   font-weight: bold;  
   font-family: cursive;  
   padding-right: 2px;  
}

20、X:nth-child(n)は、X要素の最初からいくつかのラベルに一致します.例えば、次のコードは、3番目のliラベルに一致します.

li:nth-child(3) {  
   color: red;  
}

21、X:nth-last-child(n)

li:nth-last-child(2) {  
   color: red;  
}

前のセレクタとは逆に、このセレクタは逆順序でいくつかのラベルに一致し、上のコードは最後から2番目のliラベルに一致することを意味します.
22、X:nth-of-type(n)

ul:nth-of-type(3) {  
   border: 1px solid black;  
}

:nth-child()と同様ですが、同じラベルを使用する要素のみが一致します.
23、X:nth-last-of-type(n)

ul:nth-last-of-type(3) {  
   border: 1px solid black;  
}

:nth-last-child()と同様ですが、同じラベルを使用する要素のみが一致します.
24、X:first-child

ul li:first-child {  
   border-top: none;  
}

親エレメントに一致するn番目のサブエレメント、1番目の番号は1です.
25、X:last-child

ul > li:last-child {  
   color: green;  
}

親要素の最後からn番目のサブ要素に一致し、最初の番号は1です.
26、X:only-child

div p:only-child {  
   color: red;  
}

親要素の下にあるサブ要素の1つだけを一致させます.first-child:last-childまたは:nth-child(1):nth-last-child(1)に等しいです.
27、X:only-of-type

li:only-of-type {  
   font-weight: bold;  
}

一致する親要素の下で同じラベルを使用する唯一のサブ要素は、first-of-type:last-of-typeまたは:nth-of-type(1):nth-last-of-type(1)に等しい.
28、X:first-of-type

li:only-of-type {  
   font-weight: bold;  
}

親エレメントの下で同じラベルを使用する最初のサブエレメントに一致します.nth-of-type(1)と同等です.