css樣式的六種選擇器

2022-08-21 18:51:18 字數 3013 閱讀 5654

1.標籤選擇器:

標籤選擇器,這種選擇器影響範圍大,建議盡量應用在層級選擇器中。

如:*   /* 影響所有的標籤

*/div /* 影響所有的

div標籤

*/......

......

2.id選擇器:

通過id名來選擇元素,元素的

id名稱不能重複,所以乙個樣式設定項只能對應於頁面上乙個元素,不能復用,

id名一般給程式使用,所以不推薦使用

id作為選擇器。

id是所有標籤的屬性,所有標籤都有

id屬性,寫**時

id的值是不允許重複的

如:#box

......

3.類選擇器:(常用)

通過類名來選擇元素,乙個類可應用於多個元素,乙個元素上也可以使用多個類,應用靈活,可復用,是css中應用最多的一種選擇器。

如:.red

.big

.mt10

......

4.層級選擇器:

主要應用在選擇父元素下的子元素,或者子元素下面的子元素,可與標籤元素結合使用,減少命名,同時也可以通過層級,防止命名衝突。

如:.box span

.box .red

.red

......

......

層級選擇器最好不要超過四層,否則會影響效能。

**:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>層級選擇器

title

>

<

style

type

="text/css"

>

.box

.box span

.box em

.box .span02

style

>

head

>

<

body

>

<

div

class

="box"

>

層級選擇器主要應用於選擇父元素下的

<

span

>子元素

span

>,或者子元素下面的<

span

class

="span02"

>子元素

span

>

, 可與標籤元素結合使用,減少命名,同時也可以通過層級,

<

em>防止命名衝突

em>

div>

<

div

class

="box2"

>

層級選擇器主要應用於選擇父元素下的

<

span

>子元素

span

>

,或者子元素下面的子元素,

可與標籤元素結合使用,減少命名,同時也可以通過層級,防止命名衝突。

div>

body

>

html

>

5.組選擇器:

多個選擇器,如果有同樣的樣式設定,可以使用組選擇器。

(組選擇器之間用逗號分隔;層級選擇器之間用空格分隔)

如:.box1,.box2,.box3

.box1

.box2

.box2

6.偽類及偽元素選擇器:

常用的偽類選擇器有hover,表示滑鼠懸浮在元素上時的狀態,偽元素選擇器有

before

和after

,它們可以通過樣式在元素中插入內容。

一般用在鏈結的響應

如:.box1:hover

.box2:before

.box3:after

......

......

......

......

......

......

**:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>偽類和偽元素選擇器

title

>

<

style

type

="text/css"

>

.link

.link:hover

.box01,.box02

.box01:before

.box02:after

style

>

head

>

<

body

>

<

a href

=""class

="link"

a>

<

div

class

="box01"

>這是第乙個div

div>

<

div

class

="box02"

>這是第二個div

div>

body

>

html

>

CSS樣式選擇器

1.css 選擇器 1 標記選擇器 選擇器 用來指定確定標記的樣式 如 類別選擇器 class 類別名稱 如 對應的 class 選擇器 id選擇器 id id選擇器 如 對應的 id選擇器1id 選擇器2 2.集體宣告 對應的 集體宣告 h4集體宣告 h5集體宣告 p1集體宣告 p2集體宣告 p3...

CSS樣式選擇器

樣式選擇器 每一條css樣式宣告 定義 由兩部分組成,形式如下 選擇器類選擇器 以英文圓點開頭,不可以使用數字或中文起名 使用方法 1.使用class 類選擇器名 為標籤設定乙個類,如下 膽小如鼠 2.設定類選擇器css樣式,如下 stress id選擇器 id選擇器類似於類選擇器 1.為標籤設定i...

CSS樣式 選擇器

css的選擇器 1 標籤選擇器 div p a input span h1 divp我是段落 2 類選擇器 class 類選擇器樣式 class stylediv我是div容器 我是div中的段落 3 id選擇器 id id選擇器樣式 id stylep我是div容器 4 並列選擇器 並列選擇器樣式...