ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS selectors_html/css_WEB-ITnose に関する知識

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

WBOY
リリース: 2016-06-21 09:04:29
オリジナル
1025 人が閲覧しました

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;}
ログイン後にコピー






関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート