css3选择器

结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：

 

案例演示

  通过“:nth-child(n)”选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色。

HTML代码：

<ol>  <li>item1</li>  <li>item2</li>  <li>item3</li>  <li>item4</li>  <li>item5</li>  <li>item6</li>  <li>item7</li>  <li>item8</li>  <li>item9</li>  <li>item10</li></ol>​

CSS代码：

ol > li:nth-child(2n){  background: orange;}

演示结果：

 

 

 

 

结构性伪类选择器—nth-last-child(n)

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

案例演示

选择列表中倒数第五个列表项，将其背景设置为橙色。

HTML代码：

<ol>  <li>item1</li>  <li>item2</li>  <li>item3</li>  <li>item4</li>  <li>item5</li>  <li>item6</li>  <li>item7</li>  <li>item8</li>  <li>item9</li>  <li>item10</li>  <li>item11</li>  <li>item12</li>  <li>item13</li>  <li>item14</li>  <li>item15</li></ol>​

CSS代码：

ol > li:nth-last-child(5){  background: orange;}

演示结果：

 

 

 

first-of-type选择器

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

示例演示：

通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。

HTML代码：

<div class="wrapper">  <div>我是一个块元素，我是.wrapper的第一个子元素</div>  <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>  <p>我是一个段落元素</p>  <div>我是一个块元素</div></div>

CSS代码：

.wrapper {  width: 500px;  margin: 20px auto;  padding: 10px;  border: 1px solid #ccc;  color: #fff;}.wrapper > div {  background: green;}.wrapper > p {  background: blue;}/*我要改变第一个段落的背景为橙色*/.wrapper > p:first-of-type {  background: orange;}

演示结果：

 

nth-of-type(n)选择器

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

示例演示

通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数的背景设置为橙色。

HTML代码：

<div class="wrapper">  <div>我是一个Div元素</div>  <p>我是一个段落元素</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p></div>

CSS代码：

.wrapper > p:nth-of-type(2n){  background: orange;}

演示结果：

 

 

last-of-type选择器

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

示例演示

通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色

（提示：这个段落不是“div.wrapper”容器的最后一个子元素）。

HTML代码：

<div class="wrapper">  <p>我是第一个段落</p>  <p>我是第二个段落</p>  <p>我是第三个段落</p>  <div>我是第一个Div元素</div>  <div>我是第二个Div元素</div>  <div>我是第三个Div元素</div></div>

CSS代码：

 .wrapper > p:last-of-type{  background: orange;}

演示结果：

 

 

only-child选择器

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

示例演示

通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。

HTML代码：

<div class="post">  <p>我是一个段落</p>  <p>我是一个段落</p></div><div class="post">  <p>我是一个段落</p></div>

CSS代码：

.post p {  background: green;  color: #fff;  padding: 10px;}.post p:only-child {  background: orange;}

演示结果：

 

 

only-of-type选择器

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

示例演示

通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。

HTML代码：

<div class="wrapper">  <p>我是一个段落</p>  <p>我是一个段落</p>  <p>我是一个段落</p>  <div>我是一个Div元素</div></div><div class="wrapper">  <div>我是一个Div</div>  <ul>    <li>我是一个列表项</li>  </ul>  <p>我是一个段落</p></div>

CSS代码：

.wrapper > div:only-of-type {  background: orange;}

演示结果：

 

 

:enabled选择器

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

示例演示

通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。

HTML代码:

<form action="#">  <div>    <label for="name">Text Input:</label>    <input type="text" name="name" id="name" placeholder="可用输入框"  />  </div>   <div>    <label for="name">Text Input:</label>    <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />  </div></form>  

CSS代码：

div{  margin: 20px;}input[type="text"]:enabled {  background: #ccc;  border: 2px solid red;}

结果演示：

 

 

:disabled选择器

“:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。

示例演示

通过“:disabled”选择器，给不可用输入框设置明显的样式。

HTML代码：

<form action="#">  <div>    <input type="text" name="name" id="name" placeholder="我是可用输入框" />  </div>  <div>    <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />  </div></form>  

CSS代码

form {  margin: 50px;}div {  margin-bottom: 20px;}input {  background: #fff;  padding: 10px;  border: 1px solid orange;  border-radius: 3px;}input[type="text"]:disabled {  background: rgba(0,0,0,.15);  border: 1px solid rgba(0,0,0,.15);  color: rgba(0,0,0,.15);}

结果演示：

 

 

:checked选择器

在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

示例演示：

通过“:checked”状态来自定义复选框效果。

HTML代码

<form action="#">  <div class="wrapper">    <div class="box">      <input type="checkbox" checked="checked" id="usename" /><span>√</span>    </div>    <lable for="usename">我是选中状态</lable>  </div>    <div class="wrapper">    <div class="box">      <input type="checkbox"  id="usepwd" /><span>√</span>    </div>    <label for="usepwd">我是未选中状态</label>  </div></form>

CSS代码：

form {  border: 1px solid #ccc;  padding: 20px;  width: 300px;  margin: 30px auto;} .wrapper {  margin-bottom: 10px;} .box {  display: inline-block;  width: 20px;  height: 20px;  margin-right: 10px;  position: relative;  border: 2px solid orange;  vertical-align: middle;} .box input {  opacity: 0;  position: absolute;  top:0;  left:0;} .box span {  position: absolute;  top: -10px;  right: 3px;  font-size: 30px;  font-weight: bold;  font-family: Arial;  -webkit-transform: rotate(30deg);  transform: rotate(30deg);  color: orange;} input[type="checkbox"] + span {  opacity: 0;} input[type="checkbox"]:checked + span {  opacity: 1;}

结果演示

 

::selection选择器

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：

 

从上图中可以看出，用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中，默认显示样式为：蓝色背景、白色文本。

有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。

示例演示:

通过“::selection”选择器，将Web中选中的文本背景变成红色，文本变成绿色。

HTML代码：

<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，</p>

CSS代码：

::-moz-selection {  background: red;  color: green;}::selection {  background: red;  color: green;}

结果演示：

 

注意：

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

2、Firefox 支持替代的 ::-moz-selection。

:read-only选择器

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

示例演示

通过“:read-only”选择器来设置地址文本框的样式。

HTML代码：

<form action="#">  <div>    <label for="name">姓名:</label>    <input type="text" name="name" id="name" placeholder="大漠" />  </div>  <div>    <label for="address">地址:</label>    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />  </div></form>  

CSS代码：

form {  width: 300px;  padding: 10px;  border: 1px solid #ccc;  margin: 50px auto;}form > div {  margin-bottom: 10px;} input[type="text"]{  border: 1px solid orange;  padding: 5px;  background: #fff;  border-radius: 5px;} input[type="text"]:-moz-read-only{  border-color: #ccc;}input[type="text"]:read-only{  border-color: #ccc;}

结果演示

 

:read-write选择器

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

示例演示

使用“:read-write”选择器来设置不是只读控件的文本框样式。

HTML代码：

<form action="#">  <div>    <label for="name">姓名:</label>    <input type="text" name="name" id="name" placeholder="大漠" />  </div>  <div>    <label for="address">地址:</label>    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />  </div></form>  

CSS代码：

form {  width: 300px;  padding: 10px;  border: 1px solid #ccc;  margin: 50px auto;}form > div {  margin-bottom: 10px;} input[type="text"]{  border: 1px solid orange;  padding: 5px;  background: #fff;  border-radius: 5px;} input[type="text"]:-moz-read-only{  border-color: #ccc;}input[type="text"]:read-only{  border-color: #ccc;} input[type="text"]:-moz-read-write{  border-color: #f36;}input[type="text"]:read-write{  border-color: #f36;}

结果演示：

 

::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

.clearfix::before,.clearfix::after {    content: ".";    display: block;    height: 0;    visibility: hidden;}.clearfix:after {clear: both;}.clearfix {zoom: 1;}

当然可以利用他们制作出其他更好的效果，比如右侧中的阴影效果，也是通过这个来实现的。

关键代码分析：

.effect::before, .effect::after{    content:"";    position:absolute;    z-index:-1;    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);    box-shadow:0 0 20px rgba(0,0,0,0.8);    top:50%;    bottom:0;    left:10px;    right:10px;    -moz-border-radius:100px / 10px;    border-radius:100px / 10px;}

上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。