覚えておくべき30のCSSセレクター_html/css_WEB-ITnose

はじめに

今日の主要なブラウザに適した 30 個の CSS セレクターがあります。

1.*

* {  margin: 0;  padding: 0;}

*セレクターは、それぞれの単一要素を選択します。多くのプログラマーは、上記の CSS を使用して、すべての要素のマージンとパディングをクリアします。これは機能しますが、ブラウザに大きな負荷がかかるため、これを行わないことをお勧めします。

*セレクターは子セレクターでも使用できます。

うわー

これにより、#container のすべての子に境界線が付きますが、必要がない場合は、スター セレクターを使用しないでください。

デモを見る

互換性

IE6+
Firefox
Chrome
Safari
Opera
IDセレクターの優先度 レベルは非常に高い, したがって、使用する前に、次のことを自問してください。この要素を見つけるためだけに ID を追加しただけですか?

デモを見る

互換性

IE6+

Firefox

Chrome
Safari
Opera
• 3..x

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

• クラスセレクターとID セレクターはまず、優先度はそれほど高くありません。 ID セレクターは 1 つだけを選択できますが、クラス セレクターはグループをフィルターで除外できます。

デモを見る

互換性

IE6+

Firefox

Chrome

• Safari
• Opera
4.x y

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

すべてを選択しない場合は子孫を選択または下山時に非常に役立ちますが、 catch 注意してください: セレクターが x y z a b.error の場合、その使用法は間違っています。各レイヤーを適用する必要があるかどうかを自問する必要があります。
デモを見る

互換性

IE6+

Firefox

Chrome

Safari
Opera
• 5.x
同じ種類の要素を選択したい場合、その場合は、id を使用しないでください。クラスの場合は、要素セレクターを使用するだけです。
デモを見る
互換性

IE6+

Firefox

Chrome

Safari

Opera
• 6.x:visted と x:link

.error {  color: red;}

• pseudo-class:link かどうかをフィルタリングします。タグはまだクリックされていません。クリックされていないものをフィルタするには use:visited を使用します。
• デモを見る
• 互換性

IE7+

Firefox

Chrome

Safari

Opera

7.x + y

• li a {  text-decoration: none;}

隣接するセレクターが選択されます上記のように、最初の隣接要素。この例では、 ul の後の最初の段落のフォントが赤に変わります (ul と p の間に他の要素があってはなりません)。
デモを見る
互換性
IE7+

Firefox

Chrome

Safari

Opera

• 8.x > y

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

• 子孫セレクターですが、xy と同じ子孫を持ちます。セレクターは、直接の子孫のみを選択できるという点で異なります。例:

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

• この例では、#cotainer > ul は最初の ul のみを選択し、ul に li を含む ul は検索しません。
• デモを見る
• 互換性

IE7+

Firefox

Chrome

Safari

Opera

9.x ~ y

• ul + p {   color: red;}

この種の兄弟の選択は似ていますx + y になりますが、違いは後者は最初の p のみをフィルタリングできますが、これは ul の下のすべての直接 p タグを満たすことができます。
デモを見る
互換性
IE7+
Firefox

Chrome

Safari

Opera

10.x[タイトル]

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

• 属性選択デバイス。これにより、title 属性を持つすべてのタグが選択されます。
• デモを見る
• 互換性
• IE7+
• Firefox

Chrome

Safari

Opera

11.x[href="foo"]

これセレクターはリンクを href="http として選択できます。 「://net.tutsplus.com」というタグですが、ここのリンクが変更されたらどうなるでしょうか?これは少し厳密ですが、正規表現を使用して適切に一致させることができます。

• デモを見る
• 互換性
IE7+
Firefox
Chrome

Safari

Opera

12.x[href*="nettuts"]

<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>

'*' は、nuttuts 文字を含む href と一致します。 、より厳密にしたい場合は、^ と $ を使用して開始と終了を示すこともできます。

• デモを見る
• 互換性
• IE7+
• Firefox
• Chrome

Safari

Opera

13.x[href^="http"]

これ有効な href を使用して をフィルタリングする方法は、 http:// と https:// を一致させます。

デモを見る

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

14.x[href$=".jpg"]

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

这将会选择链接为jpg格式的图片链接，可是如果图片类型为png或gif等怎么办？

view demo

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

15.x[data-*="foo"]

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

按照规则14.我们可能得：

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

可这也太。。。我们可以加一个属性用以标示。

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

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

view demo

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16.x[foo~="bar"]

a[data-info~="external"] {   color: red;}a[data-info~="image"] {   border: 1px solid black;}

~将会让我们匹配到属性值被空格分隔符分开的值，如：

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

view demo

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17.x:checked

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

这个常常对checkbox非常有用。

view demo

Compatibility

• IE9+
• Firefox
• Chrome
• Safari
• Opera

18.x:after

伪类before和after已经有了一些新的用法，比如最常见的：

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

没错，这就是默认标准clearfix的实现原理。

Compatibility

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19.x:hover

div:hover {  background: #e3e3e3;}

但是得注意，:hover在早期IE中并不适用。

Compatibility

• IE6+（In IE6, :hover must be applied to an anchor element）
• Firefox
• Chrome
• Safari
• Opera

20.x:not(selector)

div:not(#container) {   color: blue;}

反选选择器。

view demo

Compatibility

• IE9+
• Firefox
• Chrome
• Safari
• Opera

21.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;}

伪元素选择器，注意尽量还是按标准来，多使用::而不是:。

view demo

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22.x:nth-child(n)

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

选择一组中特定的孩子。n表示第几个，也可以是表达式，如2n+1,2n.

view demo

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

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

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

如果li有400个，而你需要target到第397个，那用这个咱合适不过了。

view demo

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

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

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

如果ul没有id，而你又要找第三个ul，那个这种方式是不错。

view demo

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

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

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

与ul:nth-of-type刚好相反。

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

26.x:first-child

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

view demo

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27.x:last-child

Example

<ul>   <li> List Item </li>   <li> List Item </li>   <li> List Item </li></ul>

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

view demo

但是我不想要第一个的上边框和最后一个的下边框，可以这么做：

li:first-child {    border-top: none;}li:last-child {   border-bottom: none;}

view demo

Compatibility

• IE9+
• Firefox
• Chrome
• Safari
• Opera

28.X:only-child

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

这将匹配div里只有一个p的元素。如：

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

view demo

Compatibility

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29.X:only-of-type

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

这将匹配元素内只有一个li的元素，有时这个做法很简便。比如要寻找只有一个列表的ul，可以：

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

view demo

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

30.x:first-of-type

Example

<div>   <p> My paragraph here. </p>   <ul>      <li> List Item 1 </li>      <li> List Item 2 </li>   </ul>   <ul>      <li> List Item 3 </li>      <li> List Item 4 </li>   </ul>   </div>

如何寻找上面的 "List Item 2"呢？

办法1

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

办法2

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

办法3

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

view demo

互換性

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

概要

IE6 で上記のセレクターを使用する場合は特に注意してください。ただし、この記事を読んでも影響を受けないように注意してください。 。ブラウザー互換性マトリックスを参照することも、Dean Edward の優れた IE9.js スクリプトを使用して、古いブラウザーでこれらのセレクターをサポートすることもできます。

さらに、jQuery などの Javascript ライブラリを使用している場合は、これらのネイティブ CSS3 セレクターを使用するようにしてください。これは、ブラウザー セレクター エンジンがブラウザーのネイティブ メソッドに従って解析し、コードがより効率的になるためです。

注: この記事は翻訳です、私のブログをクリックしてください 原文をクリックしてください