css復(fù)合選擇器有哪幾種

本篇內(nèi)容介紹了“css復(fù)合選擇器有哪幾種”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

復(fù)合選擇器有7種：1、并集選擇器，是多個(gè)選擇器通過逗號(hào)連接而成，為多個(gè)元素定義相同CSS樣式時(shí)使用；2、后代選擇器，語法“E F”，可選擇元素或元素組的后代；3、子元素選擇器，語法“E>F”，可選擇作為某元素子元素的元素；4、偽類選擇器等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css提供了七種復(fù)合選擇器：交集選擇器、并集選擇器、后代選擇器、子元素選擇器、相鄰兄弟選擇器、偽類選擇器、偽元素選擇器。

CSS復(fù)合選擇器

復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽。

交集選擇器

交集選擇器由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器（或者id選擇器），兩個(gè)選擇器之間不能有空格，如h4.special。

記憶技巧：

交集選擇器 是 并且的意思。 即…又…的意思

比如：

p.one   選擇的是： 類名為 .one  的 段落標(biāo)簽

用的相對(duì)來說比較少，不太建議使用。

并集選擇器

并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過逗號(hào)連接而成的，任何形式的選擇器（包括標(biāo)簽選擇器、class類選擇器、id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。

記憶技巧：

并集選擇器 和 的意思， 只要逗號(hào)隔開的，所有選擇器都會(huì)執(zhí)行后面樣式。

比如

.one, p , #test {color: #F00;}

表示  .one 和 p  和 #test 這三個(gè)選擇器都會(huì)執(zhí)行顏色為紅色。  通常用于集體聲明。

后代選擇器

后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。

子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內(nèi)的標(biāo)簽。

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級(jí)標(biāo)簽寫在前面，子級(jí)標(biāo)簽寫在后面，中間跟一個(gè) > 進(jìn)行連接，注意，符號(hào)左右兩側(cè)各保留一個(gè)空格。

白話： 這里的子 指的是 親兒子 不包含孫子 重孫子之類。

比如：

.demo > h4 {color: red;}

說明： h4 一定是demo 親兒子；  demo 元素包含著h4。

相鄰兄弟選擇器

可選擇緊接在另一元素后的元素，且二者有相同父元素

選擇緊接在 h2 元素后出現(xiàn)的段落，h2 和 p 元素?fù)碛泄餐母冈?:

h2 + p {margin-top:50px;}

偽類選擇器

偽類選擇器用于向某些選擇器添加特殊的效果。比如可以選擇 第1個(gè)，第n個(gè)元素。

類 .one 類選擇器是一個(gè)點(diǎn)

偽類 :link 用 2個(gè)點(diǎn) 就是 冒號(hào)

鏈接偽類選擇器

• :link /* 未訪問的鏈接 */

• :visited /* 已訪問的鏈接 */

• :hover /* 鼠標(biāo)移動(dòng)到鏈接上 */

• :active /* 選定的鏈接 */

  注意寫的時(shí)候，他們的順序盡量不要顛倒 按照 lvha 的順序

結(jié)構(gòu)(位置)偽類選擇器（CSS3)

• :first-child 選取屬于其父元素的首個(gè)子元素的指定選擇器

• :last-child 選取屬于其父元素的最后一個(gè)子元素的指定選擇器

• :nth-child(n) 匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型

• :nth-last-child(n) 選擇器匹配屬于其元素的第 N 個(gè)子元素的每個(gè)元素，不論元素的類型，從最后一個(gè)子元素開始計(jì)數(shù)。
  n 可以是數(shù)字、關(guān)鍵詞或公式

目標(biāo)偽類選擇器(CSS3)

:target 可用于選取當(dāng)前活動(dòng)的目標(biāo)元素

:target {
    color: red;
    font-size: 30px;
}

偽元素選擇器(CSS3)

• E::first-letter 文本的第一個(gè)單詞或字

• E::first-line 文本第一行

• E::selection 可改變選中文本的樣式

• E::before 和 E::after

在E元素內(nèi)部的開始位置和結(jié)束位置創(chuàng)建一個(gè)元素，該元素為行內(nèi)元素，且必須要結(jié)合content屬性使用。

div::befor {
  content:"開始";
}
div::after {
  content:"結(jié)束";
}

E:after、E:before 在舊版本里是偽元素，CSS3的規(guī)范里“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會(huì)被自動(dòng)識(shí)別為E::after、E::before，這樣做的目的是用來做兼容處理。

之所以被稱為偽元素，是因?yàn)樗麄儾皇钦嬲捻撁嬖兀琱tml沒有對(duì)應(yīng)的元素，但是其所有用法和表現(xiàn)行為與真正的頁面元素一樣，可以對(duì)其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現(xiàn)，實(shí)際上是css樣式展現(xiàn)的行為，因此被稱為偽元素。

注意

偽元素:before和:after添加的內(nèi)容默認(rèn)是inline元素；這兩個(gè)偽元素的content屬性，表示偽元素的內(nèi)容,設(shè)置:before和:after時(shí)必須設(shè)置其content屬性，否則偽元素就不起作用。

:first-child與:first-of-type區(qū)別

:first-child 匹配的是其父元素的第一個(gè)子元素，可以說是結(jié)構(gòu)上的第一個(gè)子元素。

:first-of-type 匹配的是在其父元素的所有子元素中 該類型元素的第一個(gè)元素

<p>結(jié)構(gòu)上的第一個(gè)p元素</p>  <!-- p:first-child -->   <!-- p:first-of-type -->
<h2>Welcome to My Homepage</h2> <!-- h2:first-of-type -->
<p>This paragraph is not the first child of its parent.</p>
<div> <!-- div:first-of-type -->
    <p>父div的第一個(gè)p元素</p>  <!-- p:first-child --> <!-- p:first-of-type -->
    <p>第二個(gè)</p>
</div>
<p>
    <b>注意:</b> :first-child作用于 IE8以及更早版本的瀏覽器, DOCTYPE必須已經(jīng)聲明.
</p>

p:first-child      // 匹配的是其父元素的第一個(gè)子元素，可以說是結(jié)構(gòu)上的第一個(gè)子元素
h2:first-child     // 匹配不到，h2的父元素的第一個(gè)子元素是p，不是h2
div:first-child    // 匹配不到，div的父元素的第一個(gè)子元素是p，不是div

p:first-of-type    // 匹配其父元素的所有p元素中的第一個(gè)元素
h2:first-of-type   // 匹配其父元素的所有h2元素中的第一個(gè)元素
div:first-of-type  // 匹配其父元素的所有div元素中的第一個(gè)元素

偽類與偽元素的區(qū)別

“css復(fù)合選擇器有哪幾種”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！