css基礎 選擇器

2022-07-26 08:06:15 字數 1898 閱讀 5711

css選擇符(選擇器)

一、各類選擇器

選擇符表示要定義樣式的物件,可以是元素本身,也可以是一類元素或者制定名稱的元素.

常用的選擇符有十種左右

型別選擇符,id選擇符,class選擇符,萬用字元,群組選擇符,包包含選擇符,偽類選擇符,偽物件選擇符。

1. 元素選擇符/型別選擇符(element選擇器 )

語法:元素名稱

說明:a)元素選擇符就是以文件語言物件型別作為選擇符,即使用結構中元素名稱作為選擇符。例如body、div、p,img,em,strong,span......等。

b)所有的頁面元素都可以作為選擇符;

用法:1)如果想改變某個元素得預設樣式時,可以使用型別選擇符;

2) 當統一文件某個元素的顯示效果時,可以使用型別選擇符;

2. id選擇器

語法:#id名

說明:1)當我們使用id選擇符時,應該為每個元素定義乙個id屬性,

如:2)id選擇符的語法格式是「#」加上自定義的id名

如:#box

3)  起名時要取英文名,不能用關鍵字:(所有的標記和屬性都是關鍵字)

如:head標記

4)乙個id名稱只能對應文件中乙個具體的元素物件,因為id只能定義頁面中某乙個唯一的元素物件。

5)   最大的用處:建立網頁的外圍結構

3.class選擇器/class選擇符

語法:.class名

說明:1)當我們使用類選擇符時,應先為每個元素定義乙個類名稱,

類選擇符的語法格式是:"如:

"用法:class選擇符更適合定義一類樣式;

4.群組選擇器

語法:選擇符1,選擇符2,選擇符3......

說明:當有多個選擇符應用相同的樣式時,可以將選擇符用「,」分隔的方式,合併為一組。

5. 包含選擇器

語法:選擇符1    選擇符2

說明:選擇符1和選擇符2用空格隔開,含義就是選擇符1中包含的所有選擇符2;

選擇符元素居中

6. 偽類選擇器(偽類選擇符)

語法 :

說明:a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連結的樣式失效;

2)為了簡化**,可以把偽類選擇符中相同的宣告提出來放在a選擇符中;

例如:a     a:hover 表示超連結的三種狀態都相同,只有滑鼠劃過變顏色。 

7.*萬用字元

語法:*

說明:通配選擇符的寫法是「*」,其含義就是所有元素。

用法:常用來重置樣式。

*將所有元素的邊界值和填充值清0。

二、選擇符的權重

css中用四位數字表示權重,權重的表達方式如:0,0,0,0

型別選擇符的權重為0001

class選擇符的權重為0010

id選擇符的權重為0100

子選擇符的權重為0000

屬性選擇符的權重為0010

偽類選擇符的權重為0010

偽元素選擇符的權重為0001

包含選擇符的權重:為包含選擇符的權重之和

內聯樣式的權重為1000

繼承樣式的權重為0000

三、注釋

html注釋

css的注釋

/*-----------------注釋內容--------------------*/

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...

CSS 選擇器之基礎選擇器

id選擇器 選擇具體的id屬性值的元素 元素選擇器 選擇具有相同標籤名稱的元素 類選擇器 選擇具有相同的class屬性值的元素。id選擇器,是根據標籤的id屬性值選擇對應的標籤的。格式 id值舉例 定義兩個p標籤,且標籤的id屬性值不同,然後用css定義p標籤的內容如何顯示。google瀏覽器中開啟...

CSS 基礎選擇器

css cascading style sheet,層疊式樣式表,即乙個標籤可以同時被多種選擇器選擇,標籤選擇器 id選擇器 類選擇器。這些選擇器都可以選擇上同乙個標籤,從而影響樣式。基礎選擇器 1.標籤選擇器,就是標籤的名字。追光者如果說你是遙遠的星河 耀眼得讓人想哭我是追逐著你的眼眸總在孤單時候...