03 高階選擇器

級選擇器分為：後代選擇器、子代選擇器、並集選擇器、交集選擇器

後代選擇器

使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）

.container p

.container .item p
style
>
head
>
<
body
>
<
div 
id="box"
class
="wrap"
>
<
div 
id="box2"
class
="wrap2"
>
<
div 
id="bo3"
class
="wrap3"
>
<
p>猜猜我是什麼顏色
p>
div>
div>
div>
body
>
html
>

使用》表示子代選擇器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。

container>p

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style 
type
="text/css"
media
="screen"
>
/*#box p
*/#box>p
style
>
head
>
<
body
>
<
div 
id="box"
class
="wrap"
>
<
p>哈哈哈
p>
<
div 
id="box2"
class
="wrap2"
>
<
div 
id="bo3"
class
="wrap3"
>
<
p>猜猜我是什麼顏色
p>
div>
div>
div>
body
>
html
>

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style 
type
="text/css"
media
="screen"
>
/*2 1 1
*//*
2 1 1
*//*
權重一樣後面覆蓋前面的，結果紅色
*/#box #box2 .wrap3 p
style
>
head
>
<
body
>
<
div 
id="box"
class
="wrap"
>
<
div 
id="box2"
class
="wrap2"
>
<
div 
id="bo3"
class
="wrap3"
>
<
p id
="pa"
class
>猜猜我是什麼顏色
p>
div>
div>
div>
body
>
html
>

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可以使用並集選擇器。

/*並集選擇器*/

h3,a

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td 

/*使用此並集選擇器選中頁面中所有的標籤，頁面布局的時候會使用*/

使用.表示交集選擇器。第乙個標籤必須是標籤選擇器，第二個標籤必須是類選擇器 語法：div.active

比如有乙個這樣的標籤。

那麼

h4

.active
/* 交集選擇器 */
h4.active

03 高階選擇器

03 高階選擇器 使用空格表示後代選擇器。顧名思義，父元素的後代 包括兒子，孫子，重孫子 1 container p 4.container item p view code 使用 表示子代選擇器。比如div p,僅僅表示的是當前div元素選中的子代 不包含孫子.元素p。1 container p ...

03 高階選擇器,屬性選擇器,偽類選擇器

使用空格表示後代選擇器。顧名思義，父元素的後代 包括兒子，孫子，重孫子 container p container item p view code 使用 表示子代選擇器。比如div p,僅僅表示的是當前div元素選中的子代 不包含孫子.元素p。container pview code 多個選擇器之...

高階選擇器

高階選擇器 並集選擇器 p,ul 交集選擇器 p.odd 交集選擇器中間不能有空格等其他符號 後不能是標籤選擇器 多個類樣式的引用 多個類樣式的優先順序只與編寫有關，與引用順序無關 層次選擇器 後代選擇器 body p 子選擇器 body p 相鄰兄弟選擇器 active p 通用兄弟選擇器 act...