*本文介紹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屬性...