今天小編給大家分享一下強(qiáng)大的CSS選擇器有哪些及怎么用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)建站專注于長興企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),成都做商城網(wǎng)站。長興網(wǎng)站建設(shè)公司,為長興等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

1. div >a

這個(gè)選擇器將使我們能夠選擇所有父元素是div標(biāo)簽的元素。

<!-- This one will be selected --> 

<div>

    <a></a>

</div>

<!-- This one won't be selected -->

<p>

    <a></a>

</p>

2. div +a

選擇緊接在div元素之后的每個(gè)標(biāo)簽。如果我們在div和a標(biāo)簽之間有一個(gè)元素，則不會(huì)選擇該元素。

<main>

<!-- This one will be selected -->

    <div></div>

    <a></a>

<!-- This one won't be selected -->

    <div></div>

    <p></p>

    <a></a>

</main>

3. div &mdash;&mdash;aa

標(biāo)簽將選擇每個(gè)標(biāo)簽，然后在同一級(jí)別上添加div標(biāo)簽。換句話說，如果a標(biāo)簽不是緊跟在div標(biāo)簽之后，而是具有div標(biāo)簽作為同級(jí)元素，則將選擇該標(biāo)簽。

<main>

<!-- This one will be selected -->

    <div></div>

    <a></a>

<!-- This one will be selected -->

    <div></div>

    <p></p>

    <a></a>

    <section>

<!-- This one will be selected -->

    <div></div>

    <p></p>

    <a></a>

    </section>

    <footer>

<!-- This one won't be selected -->

    <p></p>

    <a></a>

    </footer>

</main>

4. [屬性^=值]

例如：[class ^ =“ list-”]此選擇器將選擇每個(gè)包含class屬性且其值以list-開頭的元素。

<main>

<!-- This one will be selected -->

    <div class="list-element"></div>

<!-- This one will be selected -->

    <div class="list-container"></div>

<!-- This one will be selected -->

    <div class="list-item"></div>

<!-- This one won't be selected -->

    <div class="list__footer"></div>

</main>

5. [屬性$=值]

例如：[src $ =“.png”]這將選擇每個(gè)值以.png結(jié)尾的src屬性。

<div>

<!-- This one will be selected -->

    <img src="image1.png">

<!-- This one will be not selected -->

    <img src="image2.jpg">

<!-- This one will be selected -->

    <img src="image3.png">

<!-- This one won't be selected -->

    <img src="image4.svg">

</div>

6. [屬性*=值]

例如：[class * =“-list”]此選擇器將選擇其class屬性包含-list的每個(gè)元素。 不管-list是在類值的開頭，中間還是結(jié)尾都沒有關(guān)系。最重要的是該值必須包含-list。

<main>

<!-- This one will be selected -->

    <div class="main-list-container"></div>

<!-- This one will be selected -->

    <div class="primary-list"></div>

<!-- This one will be selected -->

    <div class="primary-list-item"></div>

<!-- This one won't be selected -->

    <div class="list-footer"></div>

</main>

以上就是“強(qiáng)大的CSS選擇器有哪些及怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：強(qiáng)大的CSS選擇器有哪些及怎么用
地址分享：http://www.rwnh.cn/article42/psgihc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、App開發(fā)、企業(yè)建站、定制網(wǎng)站、電子商務(wù)、軟件開發(fā)

廣告

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