最も一般的に使用される CSS セレクターの分析

ID、クラス、背景セレクターなどの基本的な CSS セレクターをマスターしている可能性があります。しかし、これが CSS のすべてではありません。以下は、最も問題となるブラウザ互換性問題を含む、CSS で最も一般的に使用される 30 個のセレクターの体系的な分析です。これらをマスターすることによってのみ、CSS の優れた柔軟性を真に理解できるようになります。

1. *

* { margin: 0; padding: 0; }

スターセレクターはページ上のすべての要素で機能します。 Web デザイナーは、ページ内のすべての要素のマージンとパディングを 0 に設定するためにこれをよく使用します。 * セレクターは子セレクターでも使用できます。

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

上記のコードは、コンテナ要素の ID を持つすべての子要素に適用されます。 必要な場合を除き、ページ内でスター セレクターを使用することはお勧めしません。スター セレクターの範囲が大きすぎて、ブラウザーのリソースを消費するためです。 互換性のあるブラウザ: IE6 以降、Firefox、Chrome、Safari、Opera

2. ハッシュ スコープ内の対応する ID を持つ #X

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

要素。 id は、最も一般的に使用される CSS セレクターの 1 つです。 ID セレクターの利点は、精度と優先度の高さです (優先順位のベースは 100 で、クラスの 10 よりもはるかに高いです)。JavaScript スクリプト フックに最適な選択肢であるため、欠点も明らかです。優先度が高すぎるため、再利用性が低いため、ID セレクターを使用する前に、本当に ID セレクターを使用する必要がない状況にあるのかを自問したほうがよいでしょう。 対応ブラウザ: IE6 以降、Firefox、Chrome、Safari、Opera

3. .X

.error { color: red; }

これはクラス（クラス）セレクターです。クラス セレクターと ID セレクターの違いは、クラス セレクターはスタイルを設定する必要がある要素のグループに作用できることです。 互換性のあるブラウザ: IE6+、Firefox、Chrome、Safari、Opera

4. X Y

li a { text-decoration: none; }

これは、最も一般的に使用されるセレクター、つまり子孫セレクターでもあります。 li 内のすべての a に下線が引かれていますが、li に ul があります。ul の下の li の a には下線を付けたくないのですが、下位要素 Y を選択するために使用されます。この子孫セレクターを使用する場合は、すべての子孫要素にスタイルを適用するかどうかを検討してください。この子孫セレクターのもう 1 つの機能は、名前空間のような関数を作成することです。たとえば、上記のコード スタイルのスコープは明らかに li です。 互換性のあるブラウザ: IE6+、Firefox、Chrome、Safari、Opera

5。X

a { color: red; }
ul { margin-left: 0; }

タブセレクター。タグ セレクターを使用して、スコープ内のすべての対応するタグを操作します。優先度は * よりも高いだけです。 互換性のあるブラウザ: IE6 以降、Firefox、Chrome、Safari、Opera

6。クリックされていないリンク タグに作用する X:visited および X:link

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

use:link 疑似クラス。 :hover 疑似クラスは、クリックされたリンクに対して機能します。 対応ブラウザ: IE7+、Firefox、Chrome、Safari、Opera

7. X+Y

ul + p { color: red; }

隣接セレクター、上記のコードは ul の後の最初の p と一致し、段落内のテキストの色を赤に設定します。 (最初の要素のみに一致します) 互換性のあるブラウザー: IE7 以降、Firefox、Chrome、Safari、Opera

8。X>Y

div#container > ul {border: 1px solid black;}
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>

サブセレクター。子孫セレクター X Y とは異なり、子セレクターは X の下の直接の子 Y に対してのみ機能します。上記の CSS と HTML の例では、 div#container>ul はコンテナ内の最新の UL に対してのみ機能します。理論的に言えば、X > Y は推奨する価値のあるセレクターですが、残念ながら IE6 はこれをサポートしていません。 互換性のあるブラウザ: IE7+、Firefox、Chrome、Safari、Opera

9。X+Y は最初の要素のみに一致します。 互換性のあるブラウザ: IE7+、Firefox、Chrome、Safari、Opera

10。X[title]

ul ~ p {color: red;}

属性セレクター。たとえば、上記のコードは、link 要素を title 属性と照合します。

対応ブラウザ: IE7+、Firefox、Chrome、Safari、Opera

11. X[title=”foo”]

a[title] {color: green;}

属性セレクター。 上記のコードは、href 属性を持つすべてのリンクと一致し、href は http://www.xuanfengge.com です。

この機能は非常に優れていますが、多少制限があります。 href に css9.net が含まれるすべてのリンクを一致させたい場合はどうすればよいでしょうか。次のセレクターを見てください。 互換性のあるブラウザ: IE7+、Firefox、Chrome、Safari、Opera

12. X[title*=”css9.net”]

a[href="http://www.xuanfengge.com"] {color: #1f6053;}

属性セレクター。希望どおり、上記のコードは、href に「xuanfengge.com」を含むすべてのリンクと一致します。

互換性のあるブラウザ: IE7+、Firefox、Chrome、Safari、Opera

13。もう 1 つの解決策は、すべての画像リンクに「data-file」

html コード

a[href*="xuanfengge.com"] {color: #1f6053;}

などの特定の属性を追加して、画像へのすべてのリンクのフォントの色が赤になるようにすることです。

互換性のあるブラウザ: IE7+、Firefox、Chrome、Safari、Opera

15. X[foo~=”bar”]

属性セレクター。属性セレクターのチルダ記号を使用すると、属性値内のスペースで区切られた複数の値の 1 つと一致させることができます。次の例を見てください:

html コード

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

css コード

<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>
css代码如下： a[data-filetype="image"] { color: red;}

上の例では、一致する data-info 属性に「external」を含むリンクのフォントの色は赤です。 data-info 属性に「image」を含むリンクを照合して黒い境界線を設定します。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

17. X:checked

checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。

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

上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

18. X:after和X:before

这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子：

h1:after {content:url(/i/logo.gif)}

上面的代码实现了在h1标题的后面显示一张图片。

我们也经常用它来实现清除浮动，写法如下：

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

19. X:hover

div:hover {
background: #e3e3e3;
}

:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。

需要注意的是，在ie 6中，:hover只能用于链接元素。

这里分享一个经验，在设定链接划过时出现下滑线时，使用border-bottom会比text-decoration显得更漂亮些。代码如下：

a:hover {
border-bottom: 1px solid black;
}

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

20. X:not(selector)

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

下面的代码中设定了段落中第一行的样式：

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

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera(IE6竟然支持，有些意外啊。)

22. X:nth-child(n)

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

这个伪类用于设定一个序列元素(比如li、tr)中的第n个元素(从1开始算起)的样式。在上面例子中，设定第三个列表元素li的字体颜色为红色。

看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：

tr:nth-child(2n) {
background-color: gray;
}

兼容浏览器：IE9+、Firefox、Chrome、Safari

23. X:nth-last-child(n)

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

与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

24. X:nth-of-type(n)

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

与X:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari

25. X:nth-last-of-type(n)

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

与X:nth-of-type(n)功能类似，不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

26. X:first-child

:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上(下)边框，如：

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

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

27. X:last-child

ul > li:last-child {
border-bottom:none;
}

与:first-child类似，它匹配的是序列中的最后一个元素。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

28. X:only-child

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

这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

<div>
<p> My paragraph here. </p>
</div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>

在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

29. X:only-of-type

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

这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

30. X:first-of-type

:first-of-type伪类与:nth-of-type(1)效果相同，匹配出现的第一个元素。我们来看个例子：

ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}

方案二：

p + ul li:last-child {
font-weight: bold;
}

方案三：

ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera。

总结：

如果你正在使用老版本的浏览器，如IE 6，在使用上面css选择器时一定要注意它是否兼容。不过，这不应成为阻止我们学习使用它的理由。在设计时，你可以参考浏览器兼容性列表，也可以通过脚本手段让老版本的浏览器也支持它们。

另一点，我们在使用javascript类库的选择器时，例如jquery，要尽可能的使用这些原生的css3选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会获得更快的速度