lang
="zh"
>
>
charset
="utf-8"
>
>
常用選擇器title
>
>
/*內部樣式*/
/* 1.元素選擇器,又稱為型別選擇器 */
h1/* 2.類選擇器,以「.」開頭,通過「class」屬性引用 */
.class1
.class2
/* 3.id選擇器,以「#」開頭,通過「id」屬性引用 */
#id1
/* 4.後代選擇器 */
h4 p span
/* 5.組合選擇器 */
h5,h6
/* 6.父子選擇器,父選擇器包含子選擇器,並且樣式只能作用在子選擇器
上,而不能作用到父選擇器上 */
p>span
/* 7.相鄰選擇器,選擇緊接在某乙個元素後的元素,並且二者
有相同的父元素 */
h2+h4
/* 8.屬性選擇器,對帶有指定屬性的html元素進行樣式設定 */
h1[align]
/* 9.通用選擇器,以「*」開頭,即所有標記都使用該樣式 */
/* *
*/style
>
head
>
>
>
一號標題h1
>
style
="font-family
: 仿宋;
font-size
: 20px;
color
: salmon;
">
二號標題h2
>
class
="class1 class2"
>
三號標題(類選擇器)h2
>
class
="class1"
>
四號標題h3
>
"id1"
>
the fourth titleh4
>
"id1"
>
the fourth tiltespan
>
>
>
>
the fifth titlespan
>
>
the fifth titlep
>
p>
>
the fifth titlespan
>
h4>
>
the sixth titleh5
>
>
the seventh titleh6
>
>
>
父選擇器二號子span
>
>
overspan
>
p>
p>
>
>
相鄰選擇器一號p
>
>
相鄰二號h1
>
>
相鄰三號h4
>
>
相鄰四號h4
>
h1>
align
="center"
>
屬性選擇器h1
>
body
>
html
>
執行結果: css選擇器 CSS選擇器總結
在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...
CSS選擇器之基礎選擇器的簡單使用
id 選擇器是用 號加 id 名稱 來表示,用來選擇 html 中 id 的 dom 元素 hello world content這樣 id 為 content 的元素內容會呈現紅色的效果了。tips id 選擇器只能對乙個元素生效,同乙個頁面裡不允許出現兩個 id 相同的元素 類 選擇器是用 號加...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...