1 つの派生セレクター
li strong { font-style: italic; font-weight: normal; }
要素内の子要素のスタイルを指定します。このタイプのセレクターは、階層関係が原因で失敗することはありません。 li が、strong でラップされた他の要素でラップされている場合でも、strong 要素のスタイルは引き続き有効です。
h1 > strong {color:red;}
この機能は派生セレクターの機能と似ていますが、複数のレイヤーでラップされている場合は効果が得られない点が異なります。 h1 でラップされた強力な要素のみが有効になります。
h1 + p {margin-top:50px;}
隣接兄弟セレクター。このスタイル宣言は、同じ親要素を持つ兄弟要素に対して有効になります。
2番目、idセレクター
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }
上記はidセレクターと派生セレクターの結果で、サイドバーのidを持つ要素のp要素のスタイルが上記のスタイルになります。
3、クラスセレクター
.fancy td { color: #f60; background: #666; }
この例は、td の親要素のクラスが fancy に等しいことを意味し、この親要素にラップされた td 要素は上記を使用します
td.fancy { color: #f60; background: #666; }
Fancy スタイルは td に基づいて使用されます要素 。
4、属性セレクター
[title]{color:red;}
input[type="text"]{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial;}input[type="button"]{ width:120px; margin-left:35px; display:block; font-family: Verdana, Arial;}