css提供了哪些復(fù)合選擇器

本篇內(nèi)容主要講解“css提供了哪些復(fù)合選擇器”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css提供了哪些復(fù)合選擇器”吧!

成都創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺(tái)等全方位的服務(wù)。

css提供了七種復(fù)合選擇器，分別是：子選擇器、相鄰選擇器、包含選擇器、多層選擇器嵌套、屬性選擇器、偽選擇器和偽元素選擇器。

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

在 CSS 中，可以根據(jù)選擇器的類型把選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器，復(fù)合選擇器是建立在基礎(chǔ)選擇器之上，對(duì)基本選擇器進(jìn)行組合形成的。在四種CSS基礎(chǔ)選擇器中總結(jié)過 CSS 的基礎(chǔ)選擇器是由單個(gè)選擇器組成的。

復(fù)合選擇器可以更準(zhǔn)確、更高效的選擇目標(biāo)元素(標(biāo)簽)
復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的
CSS復(fù)合選擇器包括子選擇器、相鄰選擇器、包含選擇器、多層選擇器嵌套、屬性選擇器、偽選擇器和偽元素選擇器

一、后代選擇器

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

語法

元素1 元素2 { 樣式聲明 }

上面語法表示選擇元素1里面的所有元素2（后代）。

注意

1.元素1 和元素2 中間用空格隔開

2.元素1 是父級(jí)，元素2 是子級(jí)，最終選擇的是元素2

3.元素2 可以是兒子，也可以是孫子等，只要是元素1 的后代即可

4.元素1 和元素2 可以是任意基礎(chǔ)選擇器

css提供了哪些復(fù)合選擇器

二、子選擇器

??子元素選擇器(子選擇器)只能選擇作為某元素的最近一級(jí)子元素。簡(jiǎn)單理解就是選親兒子元素。

語法

元素1 > 元素2 {樣式聲明}

注意

1.元素1和元素2中間用大于號(hào)隔開

2.元素1 是父級(jí)，元素2 是子級(jí)，最終選擇的是元素2

3.元素2 必須是親兒子，其孫子、重孫之類都不歸他管. 你也可以叫他親兒子選擇器

示例

<body>
    <div class="nav">
        <a href="#">我是兒子</a>
        <p>
            <a href="#">我是孫子</a>
        </p>
    </div>
</body>

.nav a {        /* 后代選擇器 */
    color: red;}.nav>a {        /* 子選擇器 */
    text-decoration: none;}

css提供了哪些復(fù)合選擇器

三、并集選擇器

??并集選擇器可以選擇多組標(biāo)簽, 同時(shí)為他們定義相同的樣式。通常用于集體聲明。并集選擇器是各選擇器通過英文逗號(hào)（ , ）連接而成，任何形式的選擇器都可以作為并集選擇器的一部分。

語法

元素1,元素2 {樣式聲明}

上述語法表示選擇元素1 和元素2。

注意

1.元素1 和元素2 中間用逗號(hào)隔開

2.逗號(hào)可以理解為和的意思

3.并集選擇器通常用于集體聲明

示例

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光頭強(qiáng)</span>
    <ul class="pig">
        <li>小豬佩奇</li>
        <li>豬豬俠</li>
    </ul>
</body>

div,p,ul li{
    color: blue;
}

css提供了哪些復(fù)合選擇器

四、偽類選擇器

??偽類選擇器用于向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或選擇第1個(gè)，第n個(gè)元素。偽類選擇器書寫最大的特點(diǎn)是用冒號(hào)( : )表示，比如 :hover（鼠標(biāo)經(jīng)過時(shí)）、 :first-child （選擇第一個(gè)孩子）。偽類選擇器有很多，比如有鏈接偽類、結(jié)構(gòu)偽類等，這里先總結(jié)常用的鏈接偽類選擇器。

語法

a: link			/* 選擇所有未被訪問的鏈接 */
a: visited	/* 選擇所有已經(jīng)被訪問的鏈接 */
a: hover		/* 選擇鼠標(biāo)指針位于其上的鏈接 */
a: active		/* 選擇活動(dòng)鏈接（鼠標(biāo)按下但未彈起的鏈接） */

注意

1.為了確保生效，請(qǐng)按照 LVHA 的循順序聲明：link–visited–hover–active。順序顛倒可能會(huì)失效。

2.因?yàn)?a 鏈接在瀏覽器中具有默認(rèn)樣式，所以我們實(shí)際工作中都需要給鏈接單獨(dú)指定樣式。

3.實(shí)際工作中，只需要寫一個(gè)鏈接的狀態(tài)和鼠標(biāo)經(jīng)過的狀態(tài)。

示例

<body>
    <a href="#">打工人</a><br />
    <a href="#">努力做個(gè)技術(shù)人</a>
</body>

a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color:blue;
    text-decoration: underline;
}

css提供了哪些復(fù)合選擇器

??:focus 偽類選擇器用于選取獲得焦點(diǎn)的表單元素。焦點(diǎn)就是光標(biāo)，一般情況 <input> 類表單元素才能獲取，因此這個(gè)選擇器也主要針對(duì)于表單元素來說。

語法

input:focus {
	background-color: yellow;
}

示例

<body>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text">
</body>

input:focus {
    background-color: red;
}

css提供了哪些復(fù)合選擇器

五、復(fù)合選擇器總結(jié)

選擇器	作用	特征	使用情況	隔開符號(hào)
后代選擇器	選擇后代元素	子孫后代都可以	較多	空格 .nav a
子代選擇器	選擇最近一級(jí)子元素	只選親兒子	較少	大于號(hào) .nav>p
并集選擇器	選擇多個(gè)元素	用于集體聲明	較多	逗號(hào) .nav,p,a
鏈接偽類選擇器	選擇不同狀態(tài)的鏈接	跟鏈接相關(guān)	較多	冒號(hào) a:hover
:focus 選擇器	選擇獲得光標(biāo)的表單	跟表單相關(guān)	較少	冒號(hào) input:focus

到此，相信大家對(duì)“css提供了哪些復(fù)合選擇器”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前文章：css提供了哪些復(fù)合選擇器
當(dāng)前網(wǎng)址：http://aaarwkj.com/article42/igsdhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、電子商務(wù)、做網(wǎng)站、響應(yīng)式網(wǎng)站、App開發(fā)、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

css提供了哪些復(fù)合選擇器

一、后代選擇器

二、子選擇器

三、并集選擇器

四、偽類選擇器

五、復(fù)合選擇器總結(jié)

一、后代選擇器

五、復(fù)合選擇器總結(jié)