CSS基礎知識メモ(2) Selector_html/css_WEB-ITnose
CSS セレクター
Selector { style; }
各 CSS スタイル宣言 (定義) は、次の形式の 2 つの部分で構成されます: {} より前の部分は "セレクター"、" "セレクター" は、{} 内の「スタイル」のオブジェクト、つまり「スタイル」が Web ページ内のどの要素に作用するかを指定します。
タグセレクターは、実際には HTML コード内のタグです。右側のコードエディタの 、
、、
、 など。たとえば、次のコード:
p{font-size:12px;line-height:1.6em;}上記の CSS スタイル コードの機能は、p タグのフォント サイズを 12px、行間隔を 1.6em に設定することです。
クラス セレクター
クラス セレクターは、右側のコード エディターのコードなど、CSS スタイルのコーディングで最も一般的に使用されます。「ネズミのように臆病」および「勇気」フォントとして実装できます。設定は赤です。
文法: .クラス セレクター名 {css スタイル コード;} 注: 1. 英語のドットで始めます 2. クラス セレクター名 は任意に名前を付けることができます (ただし、中国語では不可)。 : 次のように、適切なタグを使用して、変更するコンテンツをマークします: MyCSS ステップ 2: 次のように、class="クラス セレクター名" を使用してタグのクラスを設定します。 class="stress">MyCSS ステップ 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>
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1660
14
1417
52
1311
25
1261
29
1234
24
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンド
Apr 17, 2025 am 12:12 AM
HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML、CSS、およびJavaScriptの未来：Web開発動向
Apr 19, 2025 am 12:02 AM
HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
