css3学习笔记－css3选择器

属性选择器

1. E[attr]属性选择器
2. E[attr=val]属性选择器
3. E[attr|=val]属性选择器
4. E[attr~=val]属性选择器
5. E[attr*=val]属性选择器
6. E[attr^=val]属性选择器
7. E[attr$=val]属性选择器

css代码

ul, li{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }

html代码

<ul>
    <li class="linksitem" id="test_1">aa</li>
    <li class="links tx">bb</li>
    <li class="bd links" data-index="3">cc</li>
    <li class="links" id="test_4">dd</li>
    <li class="links-last">ee</li>
</ul>

下面运用上面的7中属性选择器来进行筛选

E[attr]：只要含有attr属性的元素就会被选中。

li[id]{
        background-color: #008000;
    }

如上图，第一个和第四个被选中。

也可以对一个元素使用多个属性选择器

li[data-index][class]{
        background-color: #008000;
    }

---

E[attr=val]：含有attr属性并且属性值为val。

li[class="links tx"]{
        background-color: #008000;
    }

需要注意的是：当属性等于单个值时，引号可以省略，就像这样的li[class=links]。当属性值不是单个值时，引号不能省略，必须像这样的li[class=”links tx”]

---

E[attr|=val]：属性值等于val或则是以val-开头的才会被选中

li[class|=links]{
        background-color: #06c;
    } 

---

E[attr~=val]：当一个属性的值是以空格分隔的多个值并且其中一个值等于val时就会被选中

li[class*=links]{
        background-color: #06c;
    } 

---

E[attr*=val]：只要属性attr的任意位置含有”val”就会被选中。

 li[class*=links]{
        background-color: #06c;
    } 

---

E[attr^=val]：只要属性attr的值是以val开头的就会被选中。

---

E[attr$=val]：只要属性attr的值是以val结尾的就会被选中。

伪类选择器

• :nth-child(n)
• :nth-last-child(n)
• :first-child
• :last-child
• :nth-of-type(n)
• :nth-last-of-type(n)
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :empty

html代码

<div class="selector">
    <h1>标题1</h1>
    <h2>标题2</h2>
    <p>我是第一段文本</p>
    <p>我是第二段文本</p>
</div>

下面运用上面的伪类选择器来选择元素
上面选择器中的n，都是从1开始，而不是从0开始。也可以是even，odd等关键字。还可以是(-n+5)，(2n+1)等表达式，但需要注意的是，表达式中的变量只能写为n，不能是其他的变量。如x，y等变量，那么是错的。

:nth-child(n),选中一个父元素下面的第n个子元素

---

:nth-last-child(n),选中一个父元素下面的倒数第n个子元素

---

:first-child,选中一个父元素下面的第一个子元素

---

:last-child，选中一个父元素下面的最后一个子元素

---

:nth-of-type(n)：选中一个父元素下面的第n个子元素，并且该元素是你指定的类型。

.selector > p:nth-of-type(2){
        color: #06c;
    }

上面的选择器会选中class为selector下面的第二个p元素。

---

:nth-last-of-type(n)：选中一个父元素下面的倒数第n个子元素，并且该元素是你指定的类型。

.selector > p:nth-last-of-type(1){
        color: #06c;
    }

---

:first-of-type，选中父元素内具有指定类型的第一个元素，与:nth-of-type(1)等同。

.selector > p:first-of-type{
        color: #06c;
    }

---

:last-of-type，选中父元素内具有指定类型的最后一个子元素，与:nth-of-last-type(1)等同。

---

:only-child，选中一个父元素下面的唯一的一个子元素。

.selector > p:only-child{
        color: #06c;
    }

只有当selector下面仅有唯一的一个p元素是，该选择器才起到了最用。

---

:only-of-type，这个选择器不好理解，可以这样理解。
表示一个元素有很多个子元素，而其中某一个元素的类型是唯一的，那么该元素就会被选中。

.selector > p:only-of-type{
        color: #06c;
    }

因为selector下面有很多子元素，但是p类型的子元素只有一个，所以该元素会被选中。

---

:empty，用来选择没有任何内容的元素，这里的“没有任何内容“指的是一点内容都没有，哪怕是一个空格。这个选择器用户处理动态输出内容非常方便。例如想高亮提示用户搜索出来的结果为空时，就可以这样使用

#result:empty{
    backgound-color: #fcc;
}