詳解CSS3中的選擇器（二）層次選擇器

2021-10-06 18:31:05 字數 1519 閱讀 5469

上一講我們講解了css3中的基本選擇器，這一節我們詳解下層次選擇器。

我們都知道dom是乙個樹狀結構，在樹狀結構中有根節點、父節點、子節點、兄弟節點等概念。css也引入了這些概念到選擇器中，對應的關係就是層次選擇器。層次選擇器共有四種，分別為：

在web開發中，用的較多的是前兩個-後代選擇器和子選擇器。

我們先來看一段**：

<


!doctype html>


"en-us"


>


"utf-8"


>


使用css3層次選擇器<


/title>


"text/css"


>


*              body 


div<


/style>


<


/head>


="active"


>


1<


/div>


2<


/div>


3<


/div>


45<


/div>


6<


/div>


<


/div>78


910<


/div>


<


/div>


<


/div>


<


/div>


<


/body>


<


/html>
後代選擇器

所謂的後代選擇器，就是用來選擇某個元素的所有的後代元素，比如上面的html中，使用如下的樣式，會產生什麼效果呢？

body div
這裡將body元素的後代div元素設定背景色為yellow。也就是說，所有的div都被染上了黃色。

子選擇器

所謂的子選擇器，就是選擇某個元素下（可能是多個元素）所有的一級子元素。比如，我們使用下面的選擇器及樣式，會有什麼效果呢？

body > div
這樣設定後，body下的一級div元素，這裡是內容為1、2、3、4、7的div元素設定背景色為紅色。

相鄰兄弟選擇器

相鄰兄弟指的是某個（或某些）元素同級目錄下的下乙個元素。比如，這裡我們使用下面樣式設定後的效果是什麼樣的呢？

.active + div
這裡我們設定了.active選擇器的相鄰兄弟節點，也就是第二個div元素，將其背景色設定為了綠色。

通用兄弟選擇器

所謂的通用兄弟，就是某個（或某些）元素的同級目錄下所有的後面的標記。它和相鄰兄弟選擇器類似，需要在同乙個父元素中。

比如使用下面的**，影響到的樣式：

.active ~ div
這裡將類名為"active"的元素（這裡為第乙個div）的通用兄弟（這裡是內容為2、3、4、7的div）設定了背景色為粉紅色。

CSS3選擇器 2 層次選擇器

12345 6 789 10關於層次選擇器，為了方便我們的陳述，建立了上面的文件，執行結果如下 1 後代選擇器 修改文件中的css樣式，在末尾新增如下內容 div div重新執行頁面 但凡乙個div的上層還是div元素的都被變成了橘紅色 2 子選擇器 在css樣式中新增 body div執行結果 我...

css3選擇器 層次選擇器

層次選擇器 通過html的dom元素間的層次關係獲取元素，主要層次關係有 後代 父子 相鄰兄弟和通用兄弟。1.後代選擇器 e f，作用的是選擇元素的後代元素。包括子元素 孫輩元素等。常用 div div 2.子選擇器 e f，作用的是某元素的所有子元素，不能包括孫輩元素 常用 body div 3....

css3 選擇器 CSS3選擇器詳解

css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...