的子級元素，當然這種父子結(jié)構(gòu)還有跟多。
兄弟之間的關(guān)系：在上述代碼代碼中，
祖先與后代之間的關(guān)系：在上述代碼代碼中，
層級選擇器種類
根據(jù)HTML元素之間的3種關(guān)系，CSS的層級選擇器提供了如下4種用法：
后代選擇器：將某個元素當做祖先元素，定位該元素的所有后代元素。
子級選擇器：將某個元素當做父級元素，定位該元素的所有子級元素。
相鄰兄弟選擇器：將某個元素作為目標元素，定位與該目標元素擁有同一個父級元素的下一個指定元素
普通兄弟選擇器：是將某個元素作為目標元素，定位與該目標元素擁有同一個父級元素的之后任意指定元素。
選擇符
CSS提供的4個選擇符，對應(yīng)著CSS層級選擇題的四種用法，如下所示
表示后代關(guān)系的空格（ ）
表示父子關(guān)系的尖括號（>）
表示相鄰兄弟關(guān)系的加號（+）
表示兄弟關(guān)系的波浪號（~）
在Web開發(fā)中，用的較多的是前兩個-后代選擇器和子選擇器。
我們先來看一段代碼：
使用CSS3層次選擇器
* {margin:0;padding:0;}
body {width: 300px; margin:0 auto;}
div{margin:5px;padding:5px;border:1px solid #ccc;}
1
2
3
后代選擇器
用來選擇某個元素的所有的后代元素，比如上面的html中，使用如下的樣式，會產(chǎn)生什么效果呢？
body div { background-color: yellow; }這里將body元素的后代div元素設(shè)置背景色為yellow。也就是說，所有的div都被染上了黃色。
子選擇器
用于選擇某個元素下（可能是多個元素）所有的一級子元素。比如，我們使用下面的選擇器及樣式，會有什么效果呢？
body > div { background-color: red; }這樣設(shè)置后，body下的一級div元素，這里是內(nèi)容為1、2、3、4、7的div元素設(shè)置背景色為紅色。
相鄰兄弟選擇器
用于選取某個（或某些）元素同級目錄下的下一個元素。比如，這里我們使用下面樣式設(shè)置后的效果是什么樣的呢？
.active + div { background-color: green; }這里我們設(shè)置了.active選擇器的相鄰兄弟節(jié)點，也就是第二個div元素，將其背景色設(shè)置為了綠色。
通用兄弟選擇器
用于選取某個（或某些）元素的同級目錄下所有的后面的標記。它和相鄰兄弟選擇器類似，需要在同一個父元素中。
比如使用下面的代碼，影響到的樣式：
.active ~ div { background-color: pink; }這里將類名為"active"的元素（這里為第一個div）的通用兄弟（這里是內(nèi)容為2、3、4、7的div）設(shè)置了背景色為粉紅色。
關(guān)于“CSS中的層級選擇器如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
新聞名稱：CSS中的層級選擇器如何使用
當前路徑：
http://weahome.cn/article/gocgso.html
重慶分公司
重慶分公司
