HTML學習筆記 選擇器

2021-09-08 11:12:24 字數 4412 閱讀 3978

1> id選擇器、交叉選擇器、群組選擇器、子代選擇器

>無標題文件

title

>

<

style

type

="text/css"

>pli

#two

/*.lanse

*//*

交叉選擇器

*/li.lanse

/*群組選擇器

*/#test,.seven

/*子代選擇器

*/li span

style

>

head

>

<

body

>

<

font

color

='blue'

size

='3'

>下面是html的寫法

font

>

<

font

color

='blue'

size

='3'

>下面是html的寫法

font

>

<

font

color

='blue'

size

='3'

>下面是html的寫法

font

>

<

font

color

='blue'

size

='3'

>下面是html的寫法

font

>

<

font

color

='blue'

size

='3'

>下面是html的寫法

font

>

<

font

color

='blue'

size

='3'

>下面是html的寫法

font

>

<

p>下面是css的寫法

p>

<

p>下面是css的寫法

p>

<

p>下面是css的寫法

p>

<

p>下面是css的寫法

p>

<

p>下面是css的寫法

p>

<

span

>我是ul外面的span標籤

span

>

<

ul>

<

li>

我是第1行li標籤

<

span

>我是ul裡面的span標籤

span

>

li>

<

li id

="two"

>我是第2行li標籤

li>

<

li class

="lanse"

>我是第3行li標籤

li>

<

li>我是第4行li標籤

li>

<

li class

="lanse"

>我是第5行li標籤

li>

<

li id

="test"

>我是第6行li標籤

li>

<

li class

="seven"

>我是第7行li標籤

li>

ul>

<

p class

="lanse"

>我是class為lanse的p標籤

p>

body

>

html

>

2> 子選擇器、相鄰選擇器、屬性選擇器、偽類選擇器

>無標題文件

title

>

<

style

type

="text/css"

>

/*子選擇器

*//*

#box>p

*//*

相鄰選擇器

*/div+p

/*屬性選擇器

*/p[name]a/*

偽類選擇器

*/a:hover

#word

p#word:first-letter

div[name]

style

>

head

>

<

body

>

<

div

name

="box"

>我是name為box的div元素

div>

<

p id

="word"

>p標籤p標籤p標籤p標籤p標籤p標籤

p>

<

a href

=""a>

<

br />

<

br />

<

br />

<

div

id="box"

>

<

div

id="son"

>

<

p>我是son的p標籤

p>

div>

<

p>我是box的p標籤

p>

<

p name

="test"

>我是box的p標籤

p>

<

p>我是box的p標籤

p>

div>

body

>

html

>

3> 選擇器的優先順序

>無標題文件

title

>

<

style

type

="text/css"

>

#box

h1/*

有優先順序

*/#title

style

>

head

>

<

body

>

<

h1 id

="title"

>今天是星期一

h1>

<

div

id="box"

>

<

p>我是box裡面的p標籤

p>

<

span

>我是box裡面的span標籤

span

>

div>

body

>

html

>

HTML學習筆記 選擇器

1 id選擇器 交叉選擇器 群組選擇器 子代選擇器 無標題文件 title style type text css pli two lanse 交叉選擇器 li.lanse 群組選擇器 test,seven 子代選擇器 li span style head body font color blue ...

HTML中的各種選擇器學習筆記

html中的各種選擇器學習筆記 作用 通過元素選擇器可以選擇頁面中的所有指定元素 語法 標籤名 id選擇器 通過元素的id屬性值選中唯一的元素 語法 id屬性值 通過元素的class屬性值選中一組元素 語法 class屬性值 class屬性可重複,可同時為乙個元素設定多個屬性值,多個值之間用空格隔開...

html 選擇器之屬性選擇器

屬性選擇器的主要作用個人的理解就是對帶有指定屬性的元素設定css樣式。使用css3的屬性選擇器,可以指定元素的某個屬性,也可以指定某個屬性和這個屬性所對應的值。css3的屬性選擇器主要包括下面幾種 e attr 只使用屬性名,但沒有確定任何屬性值 e attr value 指定屬性名,並指定了該屬性...