基礎選擇器 復合選擇器

2022-09-10 11:00:26 字數 1790 閱讀 7163

(1)、標籤選擇器(元素選擇器)

標籤選擇器是指用html標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。其基本語法格式如下:

標籤名  或者

元素名(2)、類選擇器

類選擇器使用「.」(英文點號)進行標識,後面緊跟類名,其基本語法格式如下:

.類名標籤呼叫的時候用class=「類名」即可。

1. 可以為元素物件定義單獨或相同的樣式。可以選擇乙個或者多個標籤。

小技巧:

1.長名稱或片語可以使用中橫線來為選擇器命名。

2.不建議使用「_」下劃線來命名css選擇器。

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

(3)、多類名選擇器

我們可以給標籤指定多個類名,從而達到更多的選擇目的。

注意:1. 樣式顯示效果跟html元素中的類名先後順序沒有關係,與css樣式書寫的上下順序有關。

2. 各個類名中間用空格隔開。

多類名選擇器在後期布局比較複雜的情況下,還是較多使用的。

(4)、id選擇器

id選擇器使用「#」進行標識,後面緊跟id名,其基本語法格式如下:

#id名

該語法中,id名即為html元素的id屬性值,大多數html元素都可以定義id屬性,元素的id值是唯一的,只能對應於文件中某乙個具體的元素。用法基本和類選擇器相同。

id選擇器和類選擇器區別

w3c規定,在同乙個頁面不允許有相同名字的id物件出現,但是允許相同名字的class。

類選擇器(class)好比人的名字,可以多次重複使用的,比如:張偉、王偉、李偉、李娜。

id選擇器好比人的身份證號碼,全中國是唯一的,不得重複。

id選擇器和類選擇器最大的不同在於使用次數上。

(5)、萬用字元選擇器

萬用字元選擇器用「*」號表示,他是所有選擇器中作用範圍最廣的,能匹配頁面中所有的元素。

復合選擇器

(1)、交集選擇器

交集選擇器由兩個選擇器構成,其中第乙個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如h3.special。

記憶技巧:交集選擇器是並且的意思。 即...又...的意思

(2)、並集選擇器

並集選擇器(css選擇器分組)是各個選擇器通過逗號連線而成的,任何形式的選擇器(包括標籤選擇器、class類選擇器id選擇器等),都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同,或部分相同,就可以利用並集選擇器為它們定義相同的css樣式。

記憶技巧:並集選擇器是和的意思,就是說,只要逗號隔開的,所有選擇器都會執行後面樣式。

(3)、後代選擇器

後代選擇器又稱為包含選擇器,用來選擇元素或元素組的後代,其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔。當標籤發生巢狀時,內層標籤就成為外層標籤的後代。

(4)、子代選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面,子級標籤寫在後面,中間跟乙個 進行連線,注意,符號左右兩側各保留乙個空格。

CSS選擇器 復合選擇器

選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...

復合選擇器

假如有下面這麼乙個例子 lang en charset utf 8 後代選擇器title head 開心p 快樂p div 樂觀p body html 我們希望將開心和快樂變成紅色,而不影響樂觀,即將div 標籤下的p標籤設定為紅色,但不是所有的p標籤設定為紅色,所以不能這麼寫 p 也許你們可能會寫...

復合選擇器

復合選擇器 復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準胡更精細的目標元素標籤。交集選擇器 交集選擇器由兩個選擇器構成,其中第乙個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如h3.special。用的相對來說比較少,不太建議使用。並集選...