ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS基礎知識メモ(2) Selector_html/css_WEB-ITnose
CSS基礎知識メモ(2) Selector_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:571950ブラウズ
CSS セレクター
Selector { style; }
各 CSS スタイル宣言 (定義) は、次の形式の 2 つの部分で構成されます: {} より前の部分は "セレクター"、" "セレクター" は、{} 内の「スタイル」のオブジェクト、つまり「スタイル」が Web ページ内のどの要素に作用するかを指定します。
タグセレクターは、実際には HTML コード内のタグです。右側のコードエディタの 100db36a723c770d327fc0aef2ce13b1、6c04bd5ca3fcae76e30b72ad730ca86d、4a249f0d628e2318394fd9b75b4636b1、e388a4556c0f65e1904146cc1a846bee、a1f02c36ba31691bcfe87b2722de723b など。たとえば、次のコード:
p{font-size:12px;line-height:1.6em;} 上記の CSS スタイル コードの機能は、p タグのフォント サイズを 12px、行間隔を 1.6em に設定することです。
クラス セレクター
クラス セレクターは、右側のコード エディターのコードなど、CSS スタイルのコーディングで最も一般的に使用されます。「ネズミのように臆病」および「勇気」フォントとして実装できます。設定は赤です。
文法: .クラス セレクター名 {css スタイル コード;} 注: 1. 英語のドットで始めます 2. クラス セレクター名 は任意に名前を付けることができます (ただし、中国語では不可)。 : 次のように、適切なタグを使用して、変更するコンテンツをマークします: 45a2772a6b6107b401db3c9b82c049c2MyCSS54bdf357c58b8a65c66d7c19c8e4d114 ステップ 2: 次のように、class="クラス セレクター名" を使用してタグのクラスを設定します。 class="stress">MyCSS54bdf357c58b8a65c66d7c19c8e4d114 ステップ 3: クラス セレクターの CSS スタイルを次のように設定します: .stress{color:red;}/* クラスの前に英語 dot*/ を追加します。
ID セレクター
ID セレクターはクラス セレクターに似ていますが、いくつかの重要な違いがあります:
1. class= クラス名の代わりにタグに id="ID 名" を設定します。 」。
2. ID セレクターの前には、英語のドット
(.) の代わりにポンド記号 (#) が付きます。
CSS の # と . の違い
id: 列の分割、上部、本文、下部などのページ上の大きなスタイルを定義するために使用されます。定義;class : .text の形式で定義された特定のメニュー、テキスト行など、より詳細なスタイルを定義するために使用されます。
HTML で ul、img、p などのタグを定義する場合は、次のように直接記述します: img{}
class はスタイル グループであり、.style, class="style" で定義されます:
.style はスタイルを定義します繰り返し呼び出すことは、1 つのページ内で同じスタイルを使用する複数の要素を含めることができることを意味します
ID は #style1、ID="style1" で定義される固定タグです
#main の違いは何ですか? .main:
#main は ID「main」の要素のスタイルを定義します
.main は「main」という名前の新しいスタイルを作成することを意味します
#main は ID「main」の要素のスタイルのみを定義できます
.main 一度定義すると、後で他の要素から呼び出すことができます。メソッドは class="main" です。CSS スタイルを定義するには、# を使用する必要があります。電話をかけるときは CLASS を使用する必要があります。 # で定義されたスタイルは通常、構造フレームワークや一部の大きなコンテナを定義し、同じページに 1 回のみ表示されますが、 で定義されたスタイルは通常、変更として機能するか、複数回繰り返されます。もう 1 つのポイントは、ID スタイルと CLASS スタイルが同じレイヤーに同時に表示され、ID が CLASS よりも優先されることです。
簡単に言えば: #main は特定のオブジェクト main を定義する排他的プロパティであり、.main は抽象オブジェクトを定義する共通プロパティ main です。より一般的な用途は、 # Web ページのフレームを定義するために使用されます。 #main の main は Web ページ内で 1 回しか表示されませんが、.main の main は何度でも表示できます。
例:
.setBlue{ color: blue;}#setRed{ color: red;} 同一性: どの要素にも適用可能
相違点:
1. IDセレクターはドキュメント内で1回のみ使用できます。クラス セレクターとは異なり、ID セレクターは HTML ドキュメント内で 1 回だけ使用できます。クラス セレクターは複数回使用できます。
2. クラスセレクターの単語リストメソッドを使用して、要素に複数のスタイルを同時に設定できます。 1 つの要素に複数のスタイルを同時に設定できますが、これは ID セレクターではなく、クラス セレクターを使用してのみ実現できます (
ID ワード リストは使用できません)。サブセレクター
サブセレクター、つまり大なり記号 (>) は、指定されたラベル要素の最初の世代の子要素 を選択するために使用されます。 次のコード:
<head> <style> .setLable>label{ color: gold; } </style></head><body> <form method="post" accept="save.php" class="setLable"> <label for="username">Username</label> <input type="text" name="username" id="username" value=""/> <br> <lable for="password">Password</lable> <input type="password" name="pass" id="pass" value=""/> <br> <input type="submit" value="Sumit" name="submit"/> <input type="reset" value="Reset" name="reset"/> </form> 包含(后代)选择器
包含选择器：即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;} 这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
.setGreen option{ color: green;}<select multiple="multiple" class="setGreen"> <option value="House Blend">House Blend</option> <option value="Caffee Latte">Caffee Latte</option> <option value="Cappuccino">Cappuccino</option> <option value="Chain Tea">Chai Tea</option></select><br />
通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体的字号为16px
*{ font-size: 16px;}
伪类选择符
伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;} 上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。
关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
分组选择符
当为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;} 它相当于下面两行代码：
h1{color:red;}span{color:red;} eg:
<style type="text/css">/*h1,span{color:red;}*/.first,#second>span{ color:green; }</style>