ホームページ > 記事 > ウェブフロントエンド > CSS の基本 2??Selector_html/css_WEB-ITnose
CSS の基本 2??Selector_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:56:381132ブラウズ
スタイル ルールについては前に説明しましたが、スタイル ルールの構文は次のとおりであることもわかっています: セレクター + 宣言ブロック
例: 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 セレクター > 疑似クラス選択セレクター >セレクター