CSS selectors_html/css_WEB-ITnose に関する知識

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