CSS3經常使用選擇器總結

時間 2019-11-10

標籤 css3 css 經常使用選擇器總結欄目 CSS 简体版

原文原文鏈接

CSS3選擇器

中午吃飯時與同事簡單聊了下H5和C3爲咱們提供的便利，晚上下班後簡單整理了下CSS3的選擇器，在這裏跟你們分享下。程序員

CSS3新增了許多靈活查找元素的方法，極大的提升了咱們查找元素的效率和精準度。CSS3選擇器與jQuery中所提供的絕大部分選擇器兼容。spa

1.屬性選擇器

其特色是經過屬性來選擇元素，具體有如下5種形式(E是element的首字母，下面都是簡寫代替，程序員老是那麼懶，哈哈哈)：code

一、E[attr] 表示存在attr屬性便可；blog

        /*存在*/
        [class]{/*選中的是全部的div*/
            color: red;
        }

二、E[attr=val] 表示屬性值徹底等於val；element

        /*全等*/
        [class="abcd"]{/*選中的是div2*/
            color: red;
        }

3、E[attr*=val] 表示的屬性值裏包含val字符而且在「任意」位置；v8

        /*包含(任意位置)*/
        [class*="abcd"]{
            color: red;
        }/*選中的是div2和div3,div4*/

4、E[attr^=val] 表示的屬性值裏包含val字符而且在「開始」位置；get

/*以什麼開頭*/
[class^="abcd"]{
    color: red;
}/*選中的是div2和div3*/

5、E[attr$=val] 表示的屬性值裏包含val字符而且在「結束」位置；it

/*結尾*/
[class$="abcd"]{
    color: red;
}/*選中的是div2和div4*/

<body>
    <div><a href="#" class="abc">div1</a></div>
    <div><a href="#" class="abcd">div2</a></div>
    <div><a href="#" class="abcdef">div3</a></div>
    <div><a href="#" class="aabcd">div4</a></div>
    <div><a href="#" class="abc">div5</a></div>
    <div><a href="#" class="abc">div6</a></div>
    <div><a href="#" class="abc">div7</a></div>
    <div><a href="#" class="abc">div8</a></div>
</body>