CSS3选择器

一、属性选择器
语法：E[att]{sRules}
说明：用于选取带有指定属性的元素。
代码：

<style type="text/css">
img[alt]{background-color: #1abc9c}
</style>
<img src="" alt="图片"/>

图片：

语法：E[att="val"]{sRules}
说明：用于选取带有指定属性和值得元素。
代码：

<style type="text/css">
input[type="text"]{border:1px  #1abc9c solid}
</style>
<input type="text" value="你好">
<input type="text" value="世界">

图片：

语法：E[att~="val"]{sRules}
说明：用于选取属性值中包含指定词汇的元素。
代码：

<style type="text/css">
div[class~="box"]{width: 100px;height: 100px;background-color: #006600}
</style>
<div class="box"></div>

图片：

语法：E[att|="val"]{sRules}
说明：用于选取带有以指定值开头的属性值元素,该值必须是整个单词。
代码：

<style type="text/css">
div[class|="box"]{width: 100px;height: 100px;background-color: #006600;margin-top:10px }
</style>
<div class="box"></div> 
<div class="box1"></div> 
<div class="box-1"></div> 

图片：

语法：E[att^="val"]{sRules}
说明：匹配属性值以指定值开头的每个元素。
代码：

<style type="text/css">
div[class^="box"]{width: 100px;height: 100px;background-color: #006600;margin-top:10px }
</style>
<div class="box">box</div>
<div class="box1">box1</div>
<div class="box-1">box-1</div> 

图片：

语法：E[att$="val"]{sRules}
说明：匹配属性值以指定值结尾的每个元素。
语法：E[att*="val"]{sRules}
说明：匹配属性值中包含指定值的每个元素。

代码：

<style type="text/css">
div[class*="box"]{width: 100px;height: 100px;background-color: #006600;margin-top:10px }
</style>
<div class="box">box</div>
<div class="box1">box1</div>
<div class="1box">1box</div>

图片：

二、伪类选择器
结构性伪类选择器
语法：:first-child与:last-child
说明：单独指定第一个子元素和最后一个子元素的样式。
代码：

<style type="text/css">
    ul{list-style: none;width: 200px;}
    .ulist li:first-child{background-color: #e74c3c;}
    .ulist li:last-child{background-color: #bfed4e;}
</style>
<ul class="ulist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

图片：

语法：:nth-child与:nth-last-child
说明：对指定序号的子元素使用样式
代码：

<style type="text/css">
    ul{list-style: none;width: 200px;}
    .ulist li:nth-child(2){background-color: #e74c3c;}
    .ulist li:nth-last-child(2){background-color: #bfed4e;}
</style>
<ul class="ulist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

图片：

对所有第奇数个子元素或第偶数个子元素使用样式
:nth-child(odd){}//所有正数下第奇数个子元素
:nth-child(even){}//所有倒数上去第奇数个子元素
:nth-last-child(even){}//所有倒数上第偶个子元素
先去找位置,然后在看是否是和选择的属性标签一样不。

代码：

<style type="text/css">
    ul{list-style: none;width: 200px;}
    .ulist li:nth-child(odd){background-color: #e74c3c;}
    .ulist li:nth-last-child(even){background-color: #bfed4e;}
</style>
<ul class="ulist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

图片：

语法：:nth-of-type与:nth-last-of-type
说明：使用这两种选择器时,CSS3在计算子元素时第奇数个子元素还是第偶数个子元素的时候,就只
针对同类型的子元素进行计算了。
先定位类,然后在去选元素。

代码：

<style type="text/css">
    ul{list-style: none;width: 200px;}
    .ulist li:nth-of-type(2){background-color: #e74c3c;}
    .ulist li:nth-last-of-type(2){background-color: #bfed4e;}
</style>
<ul class="ulist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

图片：

语法：:nth-child(αn+β)与nth-last-child(αn+β)
说明：循环使用样式,αn+β形式,α表示每次循环中共包含几种样式,β表示指定的样式在循环中所处的位置。
li:nth-child(2n) 第二个开始

代码：

<style type="text/css">
    ul{list-style: none;width: 200px;}
    .ulist li:nth-child(7n+1){background-color: #e74c3c;}
    .ulist li:nth-child(7n+2){background-color: #e7b91c;}
    .ulist li:nth-child(7n+3){background-color: #e7c323;}
    .ulist li:nth-child(7n+4){background-color: #4fe717;}
    .ulist li:nth-child(7n+5){background-color: #49e717;}
    .ulist li:nth-child(7n+6){background-color: #2e35e7;}
    .ulist li:nth-child(7n){background-color: #a335e7;}
</style>
<ul class="ulist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

图片：

语法：:only-child
说明：只有一个元素的时候使用

代码：

<style type="text/css">
    ul{list-style: none;width: 200px;}
    .ulist li:only-child{background-color: #e74c3c;}
</style>
<ul class="ulist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
<ul class="ulist">
    <li>1</li>
</ul>

图片：

目标伪类选择器
语法：target
说明：突出显示活动的html锚
URL带有后面跟有锚名称#,指向文档内某个具体的元素。这个被链接的元素就是目标元素。
:target选择器可用于选取当前活动的目标元素。
使用该选择器来对页面中的某个target元素(该元素的id当做页面中的超链接来使用)指定样式,该样式
只在用户点击了页面中的超链接,并且跳到target元素后起作用。

代码：

<style type="text/css">
    a{text-decoration: none}
    :target{background-color: #e74c3c}
</style>
<a href="#list1">列表一</a><a href="#list2">列表二</a>
<p id="list1">html文章</p>
<p id="list2">css文章</p>

图片：

三、层级选择器
语法：E>F{sRules}
说明：子元素选择器只能选择作为某元素子元素的元素,选择匹配的F元素,且匹配的F元素为所匹配的E元素的子元素。

代码：

<style type="text/css">
    .bel>p{color: #e74c3c}
</style>
<div class="bel">
    <p>believe</p>
    <p>yourself</p>
</div>

图片：

语法：E+F{sRules}
说明：相邻兄弟选择器可以选择紧接在另元素后的元素,而且他们具有一个相同的父元素,EF两元素具有一个相同的父元素,
而且F元素在E元素后面,而且紧邻。

代码：

<style type="text/css">
    .bel+p{color: #e74c3c}
</style>
<p class="bel">believe</p>
<p>yourself</p>
<p>相信自己</p>

图片：

语法：E~F{sRules}
说明：用来指定位于同一个父元素中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式
选择某个元素后面所有兄弟元素,需要在同一个父元素之中,E和F元素时属于同一父元素之内,并且F元素在E元素之后
那么选择器将选择中所有E元素后面的F元素。

代码：

<style type="text/css">
    .bel~h5{color: #e74c3c}
</style>
<div >
    <p  class="bel">believe</p>
    <h5>believe</h5>
    <h5>yourself</h5>
</div>

图片：