css 30セレクタ
30280 ワード
1、*:汎用要素セレクタ
* {
margin: 0;
padding: 0;
}*セレクタはページ上のすべての要素を選択し、上のコードの役割はすべての要素のmarginとpaddingを0に設定し、最も基本的なデフォルトのCSSスタイルをクリアする方法です.
*セレクタは、次のようなサブセレクタにも適用できます.
#container * {
border: 1px solid black;
}このようにIDがcontainerのすべてのサブラベル要素が選択され、borderが設定されます.
プレゼンテーションの表示
互換性
IE6+
Firefox
Chrome
Safari
Opera
#ID：IDセレクタ
#container {
width: 960px;
margin: auto;
}IDセレクタはCSSの中で最も効率の高いセレクタであり,使用時にIDの一意性を保証する.
プレゼンテーションの表示
互換性
IE6+
Firefox
Chrome
Safari
Opera
.class:クラスセレクタ
.error {
color: red;
}クラスセレクタの効率はIDセレクタより低く、1ページに複数のclassがあり、classは異なるラベルで使用できます.
プレゼンテーションの表示
互換性
IE6+
Firefox
Chrome
Safari
Opera
X Y：ラベルコンビネーションセレクタ
li a {
text-decoration: none;
}ラベルコンビネーションセレクタも一般的なセレクタです.
プレゼンテーションの表示
互換性
IE6+
Firefox
Chrome
Safari
Opera
X:ラベルセレクタ
a { color: red; }
ul { margin-left: 0; }ページ内のラベルスタイルを変更したい場合は、ラベルセレクタを使用することを選択します.
プレゼンテーションの表示
互換性
IE6+
Firefox
Chrome
Safari
Opera
X:visited and X:link
a:link { color: red; }
a:visted { color: purple; }疑似クラスセレクタ、最もよく使われるのはAラベルです
プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X+Y：隣接要素セレクタ
ul + p {
color: red;
}隣接するエレメントセレクタは、Xエレメントに続くすべての兄弟エレメントYに一致します.
プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X>Y:サブエレメントセレクタ
div#container > ul {
border: 1px solid black;
}#containerの下のすべてのサブ要素を一致させます.
X>YとX Yの違いについては、次のhtml例を参照してください.<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>セレクタ
#container > ulは、liの中のulではなく、最初のUL、すなわちcontainerのサブ要素ULにのみ一致するが、div ulは、すべてのDIVの中のulに一致することができる.プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X ~ Y：
ul ~ p {
color: red;
}X要素の後にある任意の同級P要素を一致させます.つまり、ULの後の兄弟のすべての要素が選択されます.
プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X[title]：属性セレクタ
a[title] {
color: green;
}インスタンスでtitleプロパティを持つaラベルなど、プロパティを持つラベルを一致させます.
プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X[href="foo"]
a[href="http://js8.in"] {
color: #1f6053; /* nettuts green */
}属性セレクタにも属し、属性内の値のラベルに一致します.例えば、インスタンスで一致する
href="http://js8.in"のaタグは、他のリンクのaタグは選択されない.プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X[href*="nettuts"]
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}プロパティセレクタに属し、href内のtutsを含むすべてのラベルに一致します.正規一致
プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}上の属相選択ラベルと似ていますが、httpで始まるAラベルに一致し、正則的に一致します.
プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X[href$=".jpg"]
a[href$=".jpg"] {
color: red;
}属性に一致する.jpgの末尾のラベルは、正則的に一致し、属性セレクタの一種でもある.
プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
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>
</html>
<pre lang="css">a[data-filetype="image"] {
color: red;
}プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X[foo~="bar"]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}一致属性に複数のスペースで区切られた値、1つの値がbarに等しいX要素、たとえば次の例です.
プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X:checked
input[type=radio]:checked {
border: 1px solid black;
}このセレクタは主にcheckboxに使用され、checkboxを現在選択されているラベルとして選択します.
プレゼンテーションの表示
互換性
IE9
Firefox
Chrome
Safari
Opera
X:after
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}beforeおよびafterは、選択されたラベルの前または後にコンテンツを挿入し、一般にフローティングをクリアするために使用されるが、IE 6、IE 7では使用できない.互換性
IE8+
Firefox
Chrome
Safari
Opera
X:hover
div:hover {
background: #e3e3e3;
}最もよく使われるのはAタグですが、IE 6ブラウザではAタグ以外のタグ
div:hoverが一致しません.プレゼンテーションの表示
互換性
IE 6+(IE 6はAタグでのみ使用可能)Firefox
Chrome
Safari
Opera
X:not(selector)
*:not(p) {
color: green;
}()のセレクタ以外のラベル要素を選択します.
プレゼンテーションの表示
互換性
IE9
Firefox
Chrome
Safari
Opera
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;
}エレメントに一致する最初の行と最初のアルファベットにそれぞれ使用されます.例を見てください.
プレゼンテーションの表示
互換性
IE6+
Firefox
Chrome
Safari
Opera
X:nth-child(n)
li:nth-child(3) {
color: red;
}一致X要素の最初から数番目のラベル、例えば上のコードが一致しているのは3番目のliラベルです.
プレゼンテーションの表示
互換性
IE9
Firefox 3.5+
Chrome
Safari
Opera
X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}前のセレクタとは逆に、このセレクタは逆順序でいくつかのラベルに一致し、上のコードは最後から2番目のliラベルに一致することを意味します.
プレゼンテーションの表示
互換性
IE9
Firefox 3.5+
Chrome
Safari
Opera
X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}:nth-child()と同様に機能しますが、同じラベルを使用する要素のみが一致します.プレゼンテーションの表示
互換性
IE9
Firefox 3.5+
Chrome
Safari
Opera
X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}:nth-last-child() と同様に機能しますが、同じラベルを使用する要素のみが一致します.プレゼンテーションの表示
互換性
IE9
Firefox 3.5+
Chrome
Safari
Opera
X:first-child
ul li:first-child {
border-top: none;
}親エレメントに一致するn番目のサブエレメント、1番目の番号は1です.
プレゼンテーションの表示
互換性
IE7+
Firefox
Chrome
Safari
Opera
X:last-child
ul > li:last-child {
color: green;
}親要素の最後からn番目のサブ要素に一致し、最初の番号は1です.
プレゼンテーションの表示
互換性
IE9
Firefox
Chrome
Safari
Opera
X:only-child
div p:only-child {
color: red;
}親要素の下にあるサブ要素の1つだけを一致させます.first-child:last-childまたは:nth-child(1):nth-last-child(1)に等しいです.
プレゼンテーションの表示
互換性
IE9
Firefox
Chrome
Safari
Opera
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)に等しい.
プレゼンテーションの表示
互換性
IE9
Firefox 3.5+
Chrome
Safari
Opera
X:first-of-type
li:only-of-type {
font-weight: bold;
}親エレメントの下で同じラベルを使用する最初のサブエレメントに一致します.nth-of-type(1)と同等です.
プレゼンテーションの表示
互換性
IE9
Firefox 3.5+
Chrome
Safari
Opera
原文出典:http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/PS:翻訳というわけでもないですが、作者によって整理されて自分の理解に溶け込んでいるので、斧正をお願いします.