Web前端 CSS選擇器

2021-09-13 04:00:15 字數 1454 閱讀 1749

*本文介紹css的選擇器,包括元素選擇器、id選擇器、類選擇器、屬性選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器。(本文內容結合w3c教程編寫)

1、元素選擇器

又稱型別選擇器(type selector),是最常見的css選擇器,文件的元素就是選擇器,比如p、h1、甚至html本身。

p

h1

2、id選擇器

根據id選擇特定元素,id前面有井號(#)。

下面設定id為title的元素內容為紫色。

#title
3、類選擇器

和id選擇器類似,類選擇器根據類選擇特定元素,在類前面有點號(.)。

不同的是,類選擇器可以選擇屬於多個類的元素,而id選擇器只能選擇唯一id的元素(出於避免混淆的目的,同乙個文件中最好不要有同樣id的元素)。

.impor

.impor.para

我是紅色斜體段落

上面的同時屬於impor 和para類,既有.impor的紅色字型,也有.impor.para的斜體字;

而我是粗體段落

選擇具有title屬性的p元素

p[title]
我是斜體段落

選擇有多個屬性的元素

[title][href]
我是紅色斜體段落

②根據具體屬性值選擇:只選擇具有特定屬性值的元素 

[title="title"]

屬性和屬性值必須完全匹配

[class="title impor"]
上面的

不應用樣式

6、 子元素選擇器

如果希望選擇某個元素的子元素,而非所有後代元素,則使用子元素選擇器。

子元素選擇器用大於號(>)作為結合符。

h1>em
第2個是

7、相鄰兄弟選擇器

選擇緊接在某個元素後的元素,且兩者的父元素必須相同(兄弟元素)。 

兄弟選擇器用加號(+)作為結合符。

h1+p
第乙個段落前面的元素是,所以不會應用樣式 

不應用樣式段落

應用樣式段落1

應用樣式段落2

Web 前端 CSS選擇器

選擇器 選擇器類選擇器 類選擇器 三年級時,我還是乙個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。到了三年級下學期時,我們班上了一節公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績...

WEB前端 CSS常用選擇器

1.1 標籤選擇器 就是用標籤名來當做選擇器。1 所有標籤都能夠當做選擇器,比如body h1 dl ul span等等 2 不管這個標籤藏的多深,都能夠被選擇上。3 選擇的是所有的,而不是某乙個。所以是共性,而不是特性。1 a 表示選擇id 1 lj1 2 同乙個頁面內id不能重複,即使不一樣的標...

web前端 CSS 屬性選擇器 030

具有特定屬性的html元素樣式不僅僅是class和id。注意 ie7和ie8需宣告 doctype才支援屬性選擇器!ie6和更低的版本不支援屬性選擇器。下面的例子是把包含標題 title 的所有元素變為藍色 下面的例項改變了標題title baidu 元素的邊框樣式 下面是包含指定值的title屬性...