CSS基礎選擇器 類選擇器 id選擇器

2021-10-22 04:44:22 字數 1047 閱讀 4643

選擇器的作用:根據不同的需求把不同的標籤選出來

是由單個選擇器組成的

包括:標籤選擇器、類選擇器、id選擇器、萬用字元選擇器

(1)標籤選擇器:

指用html標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。

優點:能夠快速為頁面中同型別的標籤統一設定樣式。

缺點:不能設計差異化樣式,只能選擇全部的當前標籤。

(2)class類選擇器:

可差異化選擇不同的標籤,單獨選乙個或某幾個標籤。

.類名

eg:.red

『』div class=「red」 『』 有點意思 『div』

類選擇器口訣:

樣式點定義、結構類(class)呼叫、乙個或多個、開發最常用

類名

類名很長時可以用中橫線來連線片語,不能用標籤名做類名

不要使用純數字、中文等命名,盡量使用英文本母來表示

類選擇器-多類名

給乙個標籤指定多個類名,達到更多的選擇目的

在標籤class屬性中寫多個類名,多個類名中間必須用空格分開

使用場景:

可以把一些標籤元素相同的樣式(共同部分)放到乙個類裡

這些標籤都可以呼叫這個公共的類,然後再呼叫自己獨有的類,方便統一修改。

(3)id選擇器

可以為標有特定id的html元素指定特定的樣式。

html元素以id屬性來設定id選擇器,css中id選擇器以「#」來定義

#pink

id屬性只能在每個html文件**現一次

口訣:樣式#定義,結構id呼叫,只能呼叫一次,別人切勿使用

(4)萬用字元選擇器

使用「*」定義,它表示選取頁面中所有元素(標籤)

*萬用字元選擇器不需要呼叫,自動就給所有的元素使用樣式。

css類選擇器和ID選擇器

語法 類選器名稱 注意 1 英文圓點開頭 2 其中類選器名稱可以任意起名 但不要起中文噢 使用方法 第一步 使用合適的標籤把要修飾的內容標記起來,如下 膽小如鼠 第二步 使用class 類選擇器名稱 為標籤設定乙個類,如下 膽小如鼠 第三步 設定類選器css樣式,如下 stress 類前面要加入乙個...

css的類選擇器 和id選擇器

css 語法由三部分構成 選擇器 屬性和值 selector選擇器 selector 通常是你希望定義的 html 元素或標籤,屬性 property 是你希望改變的屬性,並且每個屬性都有乙個值。屬性和值被冒號分開,並由花括號包圍,這樣就組成了乙個完整的樣式宣告 declaration body上面...

類選擇器和ID選擇器

什麼是選擇器?每一條css樣式宣告 定義 由兩部分組成,形式如下 選擇器在 之前的部分就是 選擇器 選擇器 指明了 中的 樣式 的作用物件,也就是 樣式 作用於網頁中的哪些元素。類選擇器 類選擇器在css樣式編碼中是最常用到的,格式如下 類選擇器名稱 注意 1.英文圓點開頭 2.類選擇器名稱可以任意...