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>
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AMAnexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PMメニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
メモ帳++7.3.1
使いやすく無料のコードエディター
Dreamweaver Mac版
ビジュアル Web 開発ツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
