タグ: 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标签

勇气

三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。

到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。

ログイン後にコピー

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 セレクターはドキュメント内で 1 回のみ使用できます。 クラスセレクターとは異なり、ID セレクターは HTML ドキュメント内で 1 回だけ使用できます。クラスセレクターは複数回使用できます。

次のコードは正しいです:

三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。

ログイン後にコピー

次のコードは間違っています:

 <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

ログイン後にコピー

2. クラスセレクターの単語リストメソッドを使用して、要素に複数のスタイルを同時に設定できます。

1 つの要素に複数のスタイルを同時に設定できますが、これは ID セレクターではなく、クラスセレクターを使用してのみ実現できます (ID 単語リストは使用できません)。以下のコードは

正しいです

(完全なコードについては、以下のコードを参照してください)

.stress{    color:red;}.bigsize{    font-size:25px;}<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

ログイン後にコピー

上記のコードの機能は、「3 年生」という 3 つの単語のテキストの色を赤に設定し、フォントサイズを 25 ピクセルに設定することです。。

以下のコードは間違っています (完全なコードについては、以下のコードを参照してください)

#stressid{    color:red;}#bigsizeid{    font-size:25px;}<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>

ログイン後にコピー

上記のコードは、「3 年生」という 3 つの単語のテキストの色を赤に設定し、フォントサイズを 25 ピクセルに設定する機能を実現できません。

类和ID选择器的区别

勇气

ログイン後にコピー

サブセレクター

さらに便利なセレクターサブセレクター、つまり大なり記号 (>) もあります。これは、指定されたラベル要素の第 1 世代の子要素を選択するために使用されます。たとえば、右側のコードエディターのコード:

.food>li{border:1px solid red;}

ログイン後にコピー

このコード行は、クラス名 food の下のサブ要素 li (果物と野菜) に赤い実線の境界線を追加します。

は次のとおりです:

子选择符

三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。

食物

水果
- 香蕉
- 苹果
- 梨
蔬菜
- 白菜
- 油菜
- 卷心菜

ログイン後にコピー

には (子孫) セレクター

が含まれます。

にはセレクター

が含まれます。つまり、指定されたラベル要素の下にある 子孫要素 を選択するために使用されるスペースを追加します。例:

.first  span{color:red;}

ログイン後にコピー

このコード行は、テキストの最初の段落の「ネズミのように臆病」のフォントの色を赤に変更します。

このセレクターと子セレクターの違いに注意してください。子セレクターはその

直接の子孫

のみを参照します。または、子要素に作用する最初の世代の子孫として理解することもできます。子孫セレクターは、すべての子子孫要素に作用します。子孫セレクターは space を介して選択し、子セレクターは「>」を介して選択します。概要: > 要素の

最初の

子孫に作用し、 スペース は要素の すべての子孫に作用します。 次のように: ユニバーサルセレクター ユニバーサルセレクターは、(*) 記号で指定され、その機能は
HTML 内のすべての

タグ要素と一致するように指定されます。 HTML 内のタグ要素の色はすべて赤に設定されます:

后代选择器

水果
- 香蕉
- 苹果
- 梨
蔬菜
- 白菜
- 油菜
- 卷心菜

ログイン後にコピー

* {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;}

ログイン後にコピー

HTML+CSS勉強記(8) - CSS selector_html/css_WEB-ITnose

セレクターとは何ですか?

タグセレクター

クラス セレクター

勇气

ID セレクター

勇气

さらに便利なセレクター サブセレクター、つまり大なり記号 (>) もあります。これは、指定されたラベル要素の第 1 世代の子要素を選択するために使用されます。たとえば、右側のコード エディターのコード:

食物

分组选择符

クラスセレクター

さらに便利なセレクターサブセレクター、つまり大なり記号 (>) もあります。これは、指定されたラベル要素の第 1 世代の子要素を選択するために使用されます。たとえば、右側のコードエディターのコード: