css3有哪些層次選擇器

本篇內容介紹了“css3有哪些層次選擇器”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

屬于css3層次選擇器的有：1、后代選擇器“E F”，選擇E元素的全部后代F元素；2、子元素選擇器“E>F”，選擇E元素下的全部子元素F；3、相鄰兄弟元素選擇器“E+F”，選擇緊接在E元素后的元素F；4、兄弟選擇器“E~F”。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

后代選擇器（E F）

后代選擇器也被稱做包含選擇器,所起做用就是能夠選擇某元素的后代元素，好比說:E F，前面E為祖先元素，Ｆ為后代元素，所表達的意思就是選擇了Ｅ元素的全部后代Ｆ元素，請注意他們之間須要一個空格隔開。這里Ｆ無論是E元素的子元素或者是孫元素或者是更深層次的關系，都將被選中，換句話說，不論Ｆ在Ｅ中有多少層關系，都將被選中：瀏覽器

.demo li {color: blue;}

上面表示的是，選中div.demo中全部的li元素spa

全部瀏覽器都支的后代選擇器。3d

子元素選擇器(E>F)

子元素選擇器只能選擇某元素的子元素，其中E為父元素，而F為子元素，其中E>F所表示的是選擇了Ｅ元素下的全部子元素Ｆ。這和后代選擇器（Ｅ Ｆ）不同，在后代選擇器中Ｆ是Ｅ的后代元素，而子元素選擇器Ｅ > F，其中Ｆ僅僅是Ｅ的子元素而以。blog

ul > li {
background: green;
color: yellow;
}

上在代碼表示選擇ul下的全部子元素li。如：bfc

IE6不支持子元素選擇器。im

相鄰兄弟元素選擇器(E + F)

相鄰兄弟選擇器能夠選擇緊接在另外一元素后的元素，并且他們具備一個相同的父元素，換句話說，EF兩元素具備一個相同的父元素，并且Ｆ元素在Ｅ元素后面，并且相鄰，這樣咱們就可使用相鄰兄弟元素選擇器來選擇Ｆ元素。demo

li + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

上面代碼表示選擇li的相鄰元素li，咱們這里一共有十個li，那么上面的代碼選擇了從第2個li到 10 個li，一共九個，請看效果：db

由于上面的li+li其中第二li是第一li的相鄰元素，第三個又是第二個相鄰元素，所以第三個也被選擇，依此類推，因此后面九個li都被選中了，若是咱們換過一種方式來看，可能會更好的理解一點：img

.active + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

按照前面所講的知識，這句代碼很明顯選擇了li.active后面相鄰的li元素，注意了和li.active后面相鄰的元素僅只有一個的。如圖：di

IE6不支持這個選擇器

通用兄弟選擇器（E ~ F）

通用兄弟元素選擇器是CSS3新增長一種選擇器，這種選擇器將選擇某元素后面的全部兄弟元素，他們也和相鄰兄弟元素相似，須要在同一個父元素之中，換句話說，E和F元素是屬于同一父元素以內，而且F元素在Ｅ元素以后，那么E ~ F 選擇器將選擇中全部Ｅ元素后面的Ｆ元素。好比下面的代碼：

.active ~ li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

上面的代碼所表示的是，選擇中了li.active 元素后面的全部兄弟元素li,如圖所示：

通用兄弟選擇器和相鄰兄弟選擇器極其類似，只不過，相鄰兄弟選擇器僅選擇是元素的僅與其相鄰的后面元素（選中的僅一個元素）；而通用兄弟元素選擇器，選中的是元素相鄰的后面兄弟元素，這樣提及來可能會有迷糊，你們能夠仔細看看其相鄰兄弟的效果圖。

IE6不支持這種選擇器的用法。

“css3有哪些層次選擇器”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！