CSS選擇器的使用

2021-10-13 02:00:16 字數 1842 閱讀 4183

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 分組選擇器 選擇...