ホームページ > ウェブフロントエンド > htmlチュートリアル > html 高度な CSS (2)_html/css_WEB-ITnose

html 高度な CSS (2)_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:34:55
オリジナル
1030 人が閲覧しました

セレクターの種類

<!doctype html><html><head>           <meta charset="utf-8">           <title>css的选择器</title>           <style type="text/css">            .stress{color:red;}/*类前面要加入一个英文圆点*/<br />            #setgreen{color:green}           </style></head><body>           <p>什么是<span class="stress">类选择器</span></p><br />           <p><span id="setgreen">id选择器</span>又是什么呢?</p></body></html>
ログイン後にコピー

クラスセレクターは、CSS スタイルのコーディングで最も一般的に使用されます。上の図に示すように、「クラスセレクター」のフォントを赤色に設定できます。

。クラス セレクター名 {css スタイル コード;} は英語のドットで始まり、中国語の数字は使用されません。

多くの点で ID セレクターはドメイン クラス セレクターと似ていますが、いくつかの重要な違いがあります:

1) class="クラス名" の代わりにタグに id="id name" を設定します

2) idセレクターの前には、英語のドット (.) の代わりにハッシュ (#) 記号が付きます

クラスと ID セレクターの違い: 類似点: 任意の要素に適用できます

相違点: ID セレクターは、 document では、複数の ID を持つことができますが、ID 名が競合することはできません。クラス セレクターは何度でも使用できます。

クラスセレクターの単語リストメソッドを使用して、要素に複数のスタイルを設定できます。ただし、これはクラス セレクター メソッドを使用してのみ実装できます。 ID セレクターは使用できません。

<!doctype html><html><head>           <meta charset="utf-8">           <title>子选择器..</title>           <style type="text/css">           .food>li{border:1px solid red;}<br />           .first span{color:red;}<br />           *{font-size:20px;}           </style></head><body>         <p class="first">子选择器与<span>包含选择器</span></p>           <ul class=" food" >                  <li>水果                        <ul>                               <li>苹果</li>                               <li>香蕉</li>                               <li>橘子</li>                        </ul>                  </li>                  <li>                       <ul>蔬菜                              <li>白菜</li>                              <li>青菜</li>                              <li>空心菜</li>                       </ul>                  </li>           </ul></body></htmL> 
ログイン後にコピー

上記のように、子セレクターは大なり記号 (>) を使用し、指定されたラベル要素の最初の世代の子要素を選択するために使用されます。

RREE RREE

RREE

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