強(qiáng)大的CSS選擇器有哪些及怎么用

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

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)注億速云行業(yè)資訊頻道。