* {color:red;}<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>后代选择器</title><style type="text/css">.first span{color:red;}.food li{ border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ }</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>* {color:red;}
HTML+CSS勉強記(8) - CSS selector_html/css_WEB-ITnose
タグ: HTML+CSS
セレクターとは何ですか?
各 CSS スタイル宣言 (定義) は 2 つの部分で構成されており、その形式は次のとおりです:
选择器{ 样式;}{} より前の部分が「セレクター」で、「セレクター」は {} 内の「スタイル」のオブジェクトを指定します, つまり、Webページ内のどの要素が「スタイル」の影響を受けるかということです
タグセレクター
タグセレクターとは、実際にはHTMLコード内のタグのことです。たとえば、以下のコードの 、
、、
、。たとえば、次のコード:
p{font-size:12px;line-height:1.6em;}上記の CSS スタイル コードの機能は、p タグのフォント サイズを 12px、行間隔を 1.6em に設定することです。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title><style type="text/css">h1{ font-weight:normal; color:red; }</style></head><body> <h1>勇气</h1> <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> <img src="http://a.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=e655190ad2160924dc70aa1de43719c2/bd315c6034a85edfdd19807f4b540923dc5475d0.jpg" ></body></html>クラス セレクター
クラス セレクターは、以下のコードなど、CSS スタイルのコーディングで最も一般的に使用されます。「マウスのように臆病」として実装でき、「勇気」のフォントは赤色に設定されます。
文法:
.类选器名称{css样式代码;}注:
1. 英語ではドットで始まります
2 クラスセレクターの名前は任意に付けることができます (ただし中国語では不可)
使用方法:
ステップ 1: を使用します適切なタグ 次のように、変更するコンテンツにマークを付けます:
<span>胆小如鼠</span>
ステップ 2: 次のように、class="クラス セレクター名" を使用してラベルのクラスを設定します:
<span class="stress">胆小如鼠</span>
ステップ 3: クラス セレクターの CSS スタイルを設定します。次のように:
.stress{color:red;}/*类前面要加入一个英文圆点*/次のコード
认识html标签 勇气
三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。
ID セレクター
多くの点で、ID セレクターはクラス セレクターに似ていますが、いくつかの重要な違いがあります:1. 代わりにタグに id="ID name" を設定します。 class="クラス名" の。
2. ID セレクターの前には英語のドット (.) ではなくポンド記号 (#) が付きます。
次のコードは、ID セレクターの完全な例です。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title><style type="text/css">#stress{ color:red;}#setGreen{ color:green;}</style></head><body> <h1>勇气</h1> <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时，我们班上了一节<span id="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p></body></html>クラス セレクターと ID セレクターについて学習すると、それらの間に多くの類似点があることがわかります。これらは同じ意味で使用できますか?それらの類似点と相違点を急いで要約しないでください:
同一性: 任意の要素に適用可能
相違点:
ID セレクターはドキュメント内で 1 回のみ使用できます。 クラス セレクターとは異なり、ID セレクターは HTML ドキュメント内で 1 回だけ使用できます。クラス セレクターは複数回使用できます。
次のコードは正しいです:
三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。
<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>
1 つの要素に複数のスタイルを同時に設定できますが、これは ID セレクターではなく、クラス セレクターを使用してのみ実現できます (ID 単語リストは使用できません)。 以下のコードは
正しいです (完全なコードについては、以下のコードを参照してください) .stress{ color:red;}.bigsize{ font-size:25px;}<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
以下のコードは間違っています (完全なコードについては、以下のコードを参照してください)
#stressid{ color:red;}#bigsizeid{ font-size:25px;}<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>上記のコードは、「3 年生」という 3 つの単語のテキストの色を赤に設定し、フォント サイズを 25 ピクセルに設定する機能を実現できません。
类和ID选择器的区别 勇气
三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。
到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。
サブセレクター
さらに便利なセレクター サブセレクター、つまり大なり記号 (>) もあります。これは、指定されたラベル要素の第 1 世代の子要素を選択するために使用されます。たとえば、右側のコード エディターのコード:
.food>li{border:1px solid red;}このコード行は、クラス名 food の下のサブ要素 li (果物と野菜) に赤い実線の境界線を追加します。
は次のとおりです:
子选择符 三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
食物
- 水果
- 香蕉
- 苹果
- 梨
- 蔬菜
- 白菜
- 油菜
- 卷心菜
には (子孫) セレクター が含まれます。 にはセレクター
が含まれます。つまり、指定されたラベル要素の下にある 子孫要素 を選択するために使用されるスペースを追加します。例: .first span{color:red;}
このセレクターと子セレクターの違いに注意してください。子セレクターはその
直接の子孫のみを参照します。または、子要素に作用する最初の世代の子孫として理解することもできます。子孫セレクターは、すべての子子孫要素に作用します。子孫セレクターは space を介して選択し、子セレクターは「>」を介して選択します。 概要: > 要素の
最初の 子孫に作用し、 スペース は要素の すべての子孫に作用します。 次のように: ユニバーサル セレクター ユニバーサル セレクターは、(*) 記号で指定され、その機能は
HTML 内のすべての
后代选择器 三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
- 水果
- 香蕉
- 苹果
- 梨
- 蔬菜
- 白菜
- 油菜
- 卷心菜
ログイン後にコピー * {color:red;}ログイン後にコピー
疑似クラス セレクター 后代选择器 三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
- 水果
- 香蕉
- 苹果
- 梨
- 蔬菜
- 白菜
- 油菜
- 卷心菜
* {color:red;}さらに興味深いのは、疑似クラス セレクターと呼ばれる理由です。これは、存在しないタグを許可します。 HTML (一部のタグ) 状態) を使用してスタイルを設定します。たとえば、HTML のラベル要素のマウスオーバー状態
のフォントの色を設定します。a:hover{color:red;}上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。
关于伪选择符：
关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是css3中，但是因为不能兼容所有浏览器，所以只是讲了这一种最常用的）。其实:hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是a:hover的组合。
<p class="first">三年级时，我还是一个<a href="http://www.baidu.com">胆小如鼠</a>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}它相当于下面两行代码：
h1{color:red;}span{color:red;}
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1385
52
84
11
28
99
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
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を構築します。
