CSS學習筆記 ID和Class選擇器

2021-10-08 15:11:20 字數 1972 閱讀 3145

id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。html元素以id屬性來設定id選擇器,css 中 id 選擇器以 「#」 來定義。以下的樣式規則應用於元素屬性 id=「para1」:

>

>

charset

="utf-8"

>

>

prcorangetitle

>

>

#para1

style

>

head

>

>

"para1"

>

hello world!!!p

>

>

this paragraph is not affected by the style.p

>

body

>

html

>

class 選擇器用於描述一組元素的樣式,class 選擇器有別於id選擇器,class可以在多個元素中使用。class 選擇器在html中以class屬性表示, 在 css 中,class選擇器以乙個點"."號顯示:在以下的例子中,所有擁有 center 類的 html 元素均為居中。

>

>

charset

="utf-8"

>

>

prcorangetitle

>

>

.center

style

>

head

>

>

class

="center"

>

標題居中h1

>

class

="center"

>

段落居中。p

>

body

>

html

>

你也可以指定特定的html元素使用class。在以下例項中, 所有的 p 元素使用 class=「center」 讓該元素的文字居中:

>

>

charset

="utf-8"

>

>

prcorangetitle

>

>

p.center

style

>

head

>

>

class

="center"

>

this heading will not be affectedh1

>

class

="center"

>

this paragraph will be center-aligned.p

>

body

>

html

>

除了提到的 id 和 class 選擇器外,第三種選擇器為標籤選擇器,即以 html 標籤作為 css 修飾所用的選擇器。

>

h3style

>

>

prcorangeh3

>

第四種選擇器即直接在標籤內部寫css**。

style

="color

:red;

">

prcorangeh3

>

這四種 css 選擇器有修飾上的優先順序,即:第四種 > id > class > 第三種

css學習之id和class選擇器

如果你要在html元素中設定css樣式,你需要在元素中設定 id 和 class 選擇器。id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。html元素以id屬性來設定id選擇器,css 中 id 選擇器以 來定義。以下的樣式規則應用於元素屬性 id test1 demo 測試一測...

CSS中id和class的區別

首先,在表現形式上 id 的優先順序比css高,例如 藍色理想 id和class都定義了背景顏色的屬性,但是由於id的優先順序比class高,所以背景色為id所定義的紅色 再次,class是通用屬性,就是說幾個div可以呼叫同乙個class 而id是唯一的,web標準中不允許出現兩個div的id標識...

CSS中class和id的區別

類選擇器和id選擇器是css中經常使用到的選擇器,看書看一遍的時候就如囫圇吞棗,一掃而過,所以理解得也不透徹。今天又重新看到了,腦海裡的概念總算清晰了點。所以總結了一下他們之間的區別,列出如下 1.所繫結的標籤屬性不同,class選擇器繫結的標籤屬性為class,例如下面的例子 123 1112 我...