學習筆記(四) CSS選擇器

2021-10-05 15:04:32 字數 2314 閱讀 9210

css指層疊樣式表(cascading style sheets),也稱css樣式表或級聯樣式表,跟html一樣,也是一種標記語言。由於html的侷限性,網頁的內容只是單純的填充,沒有經過合理排布,樣式醜陋,而用css可以解決這個問題,用於美化網頁,包括設定頁面的文字內容(字型、大小、對齊方式等)、外形(寬高、邊框樣式、邊距等)、版面布局和外觀顯示樣式。

基本語法:

>

選擇器style

>

選擇器是用於指定css樣式的html標籤,花括號是對該物件設定的具體樣式。

**風格

樣式一般用展開格式書寫,一行乙個屬性,看起來更直觀

一般用小寫字母

冒號、選擇器後保留空格

1.基礎選擇器(單個選擇器)

(1)標籤選擇器——html標籤名作為選擇器

這種方式會把某一類標籤名全部選擇出來,能快速為頁面同型別的標籤統一設定樣式,但缺點是不能設計差異化樣式。

(2)類選擇器——單獨選擇乙個或幾個標籤

>

.類名style

>

中哪個標籤想使用這個樣式就在自己標籤後加乙個屬性class=「類名」,類名自定義,但最好有意義,便於後期維護修改,增加**可讀性。類名的命名規則:長名稱或片語可以使用中橫線來命名,不要用純數字、中文命名。

(3)id選擇器

>

#id名

style

>

id選擇器與類選擇器最大的區別在於使用次數上:類選擇器相當於乙個人可以有多個名字,同乙個名字也可以被多個人使用;id選擇器相當於人的身份證號碼,是唯一的,不可以重複使用。id選擇器一般用於頁面上唯一的元素上,經常和js搭配使用。

(4)萬用字元選擇器

萬用字元選擇器用於將頁面中所用的標籤進行統一修改。

>

*style

>

最常用於清除所有元素的內外邊距,因為在不同瀏覽器中,預設的各種邊距一般不同,為了避免在不同瀏覽器上網頁出現顯示誤差,一般在設定樣式前都要先將所有邊距全部清除一遍,由程式設計師重新統一設定。

>

*style

>

2.復合選擇器

復合選擇器是由兩個及以上的基礎選擇器通過不同方式組合而成,能夠更準確高效選擇目標元素(標籤)。

(1)後代選擇器(包含選擇器)

可以選擇父元素裡面的子元素,其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔。

>

<--! 表示元素1裡面所有的元素2,只選擇了元素2 -->

元素1 元素2

style

>

(2)子(元素)選擇器

與後代選擇器的區別在於:只能選擇某元素的最近一級子元素,即直接後代。

(3)並集選擇器

用於多組標籤選擇選擇相同的樣式。最後乙個選擇器不需要加逗號。

>

元素1,

元素2style

>

(5)偽類選擇器

用於向某些選擇器新增效果,比如給鏈結新增特殊效果,或選擇第乙個,第n個元素。

偽類選擇器

說明a:link

選擇所有未被訪問的鏈結

a:visited

選擇所有已被訪問的鏈結

a:hover

選擇滑鼠指標位於其上的鏈結(最常用)

a:active

選擇活動鏈結(滑鼠按下未彈起的鏈結)

例如下方的**可以實現將鏈結a設定成天藍色,如果將滑鼠移動到鏈結a上,會變成紅色。

>

aa:hover

style

>

>

href

="#"

>

我是空鏈結a

>

body

>

注意事項:

為了確保鏈結偽類選擇器能夠生效,要按照lvha順序宣告。

鏈結a在瀏覽器中具有預設樣式,直接對body進行整體修改是不會,這個涉及到優先順序的問題,以後會有說明。改變鏈結a,需要給鏈結單獨指定樣式。

>

input:focus

style

>

>

type

="text"

>

body

>

CSS學習筆記 選擇器

用過css的同志們都知道,選擇器是非常重要的,如果選擇器使用不當,即使你的css寫的再好,但是不知道要用在哪個元素上,這不是英雄無用武之地嗎?css,用過的都說好!最基本的選擇器,id選擇器,類選擇器這些大家早已心知肚明的就不在這裡贅述了,有那功夫趕緊研究一下把妹攻略 link,visited被稱為...

css選擇器學習筆記

概念 層疊樣式表 同乙個樣式都作用於同乙個元素 設定網頁外觀 注意 如果同乙個樣式同時作用於同乙個元素,最終樣式決定於樣式的優先順序 css選擇器 可以使css樣式與元素進行分離 作用 減少 冗餘 方便後期維護 語法 選擇器 注意 符號都是英文的,符號必須寫 行間樣式 語法 標籤名 style 樣式...

學習筆記 CSS選擇器

1 元素選擇器 1.id選擇器,2.類選擇器,3.標籤選擇器,4.萬用字元選擇器 2 關係選擇器 1.包含關係 e f e的所有f後代 2.子代選擇 e!important 內聯樣式 id 屬性 類 偽類 元素 偽元素 關係 萬用字元 繼承 瀏覽器預設屬性 內聯樣式 特殊性 1000 id 特殊性 ...