CSS の基本 2??Selector_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS の基本 2??Selector_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:56:38

オリジナル

1133 人が閲覧しました

スタイルルールについては前に説明しましたが、スタイルルールの構文は次のとおりであることもわかっています: セレクター + 宣言ブロック

例: div{ color: black; } div はセレクターを意味します (ここでは要素セレクターを示します)。、中括弧内の内容は宣言ブロックです。

Selector は、スタイルルールが作用できる HTML ドキュメント内の要素を指定するために使用されます。一般的なセレクターのタイプは次のとおりです:

1. 要素セレクター (タイプセレクター) : ドキュメントツリー内のこれらの要素の位置に関係なく、セレクターと一致する Web ページ上の任意の HTML 要素。

例: p{background:aqua; color:pink; } ドキュメントツリー内の p 要素の位置に関係なく、Web ページ上の任意の p 要素と一致します

2 クラスセレクター: を使用して選択します。 class 属性を持つ特定の HTML 要素、構文形式: .class name {attribute: value;}

<head><style type="text/css">	.hello{		width:100px;		height: 100px;		background: #eee;		color: blue;		font-weight: bold;	}	</style></head><body><span style="white-space:pre">	</span><div class="hello">类选择器</div></body>

ログイン後にコピー

同じ class 属性値は同じページに複数回出現できます 3.

IDセレクター: 特定の ID 属性を持つ HTML 要素を選択するために使用されます。構文形式: #id name { 属性: 値; }

<head><style type="text/css">	#hello{		width:100px;		height: 100px;		background: #eee;		color: blue;		font-weight: bold;	}</style></head><body><span style="white-space:pre">	</span><div id="hello">ID选择器</div></body>

ログイン後にコピー

同じ ID 属性値は、同じページに 1 回だけ表示できます

4。ワイルドカード選択セレクター: すべての要素を選択するために使用されます。構文: *{属性: value}
5. 含まれるセレクター : ドキュメント内の要素の子孫要素を選択するために使用されます

最初のメソッド:

<head><style type="text/css">	p span{		font-weight: bold;		color:red;	}	</style></head><body><p>how <span> are</span> you?</p></body>

ログイン後にコピー

いいえ、2 つのメソッドがあります
6. 疑似クラスセレクター : ハイパーリンク要素の 4 つの異なる状態をさまざまな方法でフォーマットします
:link{} 未訪問のリンクに使用されるセレクター

a: Visited{} 訪問済みリンクに使用されるセレクター

a:hover{} マウスカーソルが置かれているリンクに使用されるセレクター。ホバーは他の要素でも使用できます。マウスカーソルが置かれたときにスタイルを作成するための編集ターゲット上で

a:active{} フォーカスを受け取るリンク (例: クリック) で使用されるセレクター

<head><style type="text/css">	p>.sp{		font-weight: bold;		color:red;	}	</style></head><body><span style="white-space:pre">	</span><p>how <span class="sp"> are</span> you?</p></body>

ログイン後にコピー

7. 疑似要素セレクター :

(1) :first-line要素の最初の行のセレクター

段落の最初の行など

<head><style type="text/css">	.a:link{color: #000;}	.a:visited{color: #ff0;}	.a:hover{color:red;}	.a:active{color:black;}</style></head><body>	<a href="#" class="a">点点点</a>	</body>

ログイン後にコピー

のみ hello は赤です

(2) :first-letter 要素の最初の文字のセレクター

最初の文字など段落の

<head><style type="text/css">	p:first-line{		color:red;	}</style></head><body><p>hello<br/>world</p></body>

ログイン後にコピー

覦 の単語だけが赤です。

(3) :first-child は、最初の要素が ( :first-child) である内のすべてのコンテンツのセレクターです

<head><style type="text/css">	p:first-letter{		color:red;	}</style></head><body><p>蓦然回首</p></body>

ログイン後にコピー

振り返ると は赤です

<head><style type="text/css">	p:first-child{		color:red;	}</style></head><body><p>蓦然回首</p><p>然后呢？</p></body>

ログイン後にコピー

の色フォントコンテンツがない場合は赤色になります。の最初の要素は p ではなく div であるため セレクターの優先度 : ID セレクター > 疑似クラス選択セレクター >セレクター