CSS选择器详解

CSS3选择器

CSS选择器用于选择你想要控制样式的元素，准确的找HTML元素，是它存在的意义。

CSS1和CSS2的选择器我们经常使用，在这里就不在赘述了，我们直接看看CSS3中给我们提供了哪些更加便捷的选择器。

所有主流浏览器都支持 CSS3 选择器。ie8以下浏览器要想使用此选择器，HTML文档声明需要是HTML5的文档声明<!DOCTYPE>。

element1~element2

element1~element2 选择器匹配出现在 element1 后面的 element2。

element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。

<style>
    h2~p{color:red;}
</style>
<!--这个div下h2后的三个p标签文字颜色为红色-->
<div>
    <h2>标题</h2>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
</div>
<!--以下三个p标签没有变化-->
<p>段落</p>
<p>段落</p>
<p>段落</p>

[attribute^=value]

[attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。

<style>
    p[class^=test]{color:red;}
</style>
<!--第四个元素文字颜色为红色-->
<div class="first_test">第一个元素</div>
<div class="second">第二个元素</div>
<div class="test">第三个元素</div>
<p class="test">第四个元素</p>

[attribute$=value]

[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素。

<style>
    div[class$=test]{color:red;}
</style>
<!--class属性值以test结尾的元素，文字颜色是红色-->
<div class="first_test">第一个元素</div>
<div class="second">第二个元素</div>
<div class="test">第三个元素</div>
<p class="test">第四个元素</p>

[attribute*=value]

[attribute*=value] 选择器匹配元素属性值包含指定值的元素。

<style>
    div[class$=test]{color:red;}
</style>
<!--class属性值中包含test的元素，文字颜色是红色-->
<div class="first_test">第一个元素</div>
<div class="second">第二个元素</div>
<div class="test">第三个元素</div>
<p class="test">第四个元素</p>

:first-of-type

:first-of-type选择器匹配元素其父级是特定类型的第一个子元素。
提示: 和:nth-of-type(1)是一个意思。
此选择器只支持高版本浏览器，可用在移动端

<style>
    p:first-of-type{
        background:red;
    }
</style>
<div>
    <h2>标题</h2>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
</div>

:last-of-type

:first-of-type选择器匹配元素其父级是特定类型的第一个子元素。
:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。
提示: 和:nth-last-of-type(1)是一个意思。
此选择器只支持高版本浏览器，可用在移动端

<style>
    p:last-of-type{
        background:red;
    }
</style>
<div>
    <h2>标题</h2>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
</div>

:only-of-type

:only-of-type选择器匹配属于同类型中唯一同级元素。
此选择器只支持高版本浏览器，可用在移动端

<style>
    p:only-of-type{
        background:red;
    }
</style>
<!--匹配属于同类型中唯一同级元素的p元素的背景颜色-->
<div><p>第一个段落</p><!--这个p标签的背景是红色的--></div>
<div>
    <p>第二个段落</p>
    <p>第三个段落</p>
</div>

only-child

:only-child选择器匹配属于父元素中唯一子元素的元素。
此选择器只支持高版本浏览器，可用在移动端

<style> 
p:only-child{
    background:#ff0000;
}
</style>
<div><p>我是唯一的子级</p></div>
<div><span>我是哥哥</span><p>我是弟弟</p></div>
<p>我不是子级哦</p>

:nth-child()

:nth-child(n)选择器匹配父元素中的第n个子元素。
n可以是一个数字，一个关键字，或者一个公式。
该选择器匹配同类型中的第n个同级兄弟元素。
此选择器只支持高版本浏览器，可用在移动端

<style> 
p:nth-child(2){
    /*第二个元素背景为红色 只和个数有关，和是什么元素无关*/
    background:red;
}
</style>
<h1>第一个元素</h1>
<p>第二个元素</p>
<p>第三个元素</p>
<p>第四个元素</p>

:nth-last-child()

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式。
该选择器匹配父元素中的倒数第n个结构子元素。
此选择器只支持高版本浏览器，可用在移动端

<style>
p:nth-last-child(2){
    background:red;
}
</style>
<p>第一个元素</p>
<p>第二个元素</p>
<p>第三个元素</p><!--这个元素的背景是红色的-->
<p>第四个元素</p>

:nth-of-type()

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式。
该选择器匹配父元素中的第n个子元素。
此选择器只支持高版本浏览器，可用在移动端

<style> 
p:nth-of-type(2){
    background:red;
}
</style>
<h1>第一个元素</h1><!--这个元素不是p元素-->
<p>第二个元素</p>
<p>第三个元素</p><!--这个元素的背景是红色的-->
<p>第四个元素</p>

:nth-last-of-type()

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。
n 可以是一个数字，一个关键字，或者一个公式。
该选择器匹配父元素中的倒数第n个结构子元素

<style> 
p:nth-of-type(2){
    background:red;
}
</style>
<h1>第一个元素</h1>
<p>第二个元素</p>
<p>第三个元素</p><!--倒数第二个p元素的背景是红色的-->
<p>第四个元素</p>

:last-child

:last-child选择器用来匹配父元素中最后一个子元素。
提示: p:last-child等同于p:nth-last-child(1)。

<style> 
p:last-child{
    background:red;
}
</style>
<h1>第一个元素</h1>
<p>第二个元素</p>
<p>第三个元素</p>
<p>第四个元素</p><!--倒数第一个p元素的背景是红色的-->

以上是常用的CSS3选择器，在之后的文章中，我们会分享更多更实用的CSS知识。