是的，从这里开始我们就开始学习CSS3的选择器了，学习资源CSS3选择器 属性选择器
属性选择器
发现属性选择器真的是非常强大的功能。
总结一下：
X[att^="value"] 以value开始的所有字符串
X[att$="value"] 以value结束的所有字符串
X[att*="value"] 包含value的所有字符串
其中att可以是class，title,id,href之类的。
image
像下面这样子：
a[class^="column"]{background:red;}
a[href$="doc"]{background:green;}
a[title*="box"]{background:blue;}
<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc" class="green">我的背景想变成绿色</a>
<a href="2.doc" class="green">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>
结构性伪类选择器—root
看名字就知道，这货是一个根选择器，相当于html，设置全局设置，比如：
:root {
background:orange;
}
结构性伪类选择器—not
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：
form {
width: 200px;
margin: 20px auto;
}
div {
margin-bottom: 20px;
}
input:not([type="submit"]){
border:1px solid red;
}
相关HTML代码
<form action="#">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="John Smith" />
</div>
<div>
<label for="name">Password Input:</label>
<input type="text" name="name" id="name" placeholder="John Smith" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
演示结果：
image
这里的type也可以设置其他的，比如id,class之类的。
结构性伪类选择器—empty
:empty选择器其实就是空的意思。用来筛选出没有任何内容的元素，没有内容就是空格也会有。
比如：
div:empty{
display:none;
}
结构性伪类选择器—target
:target选择器称为目标选择器，用来匹配文档页面的url的某个标识符的目标元素，
这个还有点绕，仔细看上面的这段话，先看一个例子：
<style>
#brand:target{
background:orange;
color:#fff;
}
</style>
</head>
<body>
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>content for Brand</p>
</div>
</body>
1、这个元素是匹配url的某个标识符，那么这个标识符通常会包含一个#号，然后后面会有一个标识符名称，在上面的代码里就是#brand
2、:target就是用力啊匹配brand的元素(id="brand")的元素。上面代码中的那个div
通俗点讲，url通过#brand告诉:target，它应该找的是谁#brand.理解到这一点就可以了。
多个url（多个target）处理：
就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。
结构性伪类选择器—first-child
“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
ol > li:first-child{
color: red;
}
这个和last-child一样的用法
.post {
padding: 10px;
border: 1px solid #ccc;
width: 200px;
margin: 20px auto;
}
.post p {
margin:0 0 15px 0;
}
.post p:last-child {
margin-bottom:0;
}
结构性伪类选择器—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的时候，不选择任何匹配的元素。如下表所示：
image
这个选择器牛逼了。
案例演示：
通过“:nth-child(n)”选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色。
<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>
ol > li:nth-child(2n){
background: orange;
}
结构性伪类选择器—nth-last-child(n)
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
ol > li:nth-last-child(5){
background: orange;
}
从第五个设置背景颜色为橙色。
first-of-type选择器
:first-of-type选择器类似于:first-child选择器，不同之处就是指定了元素的类型，用来定位一个父元素下的某个类型的第一个子元素。
.wrapper >div:first-of-type{
background:orange;
}
定位wrapper父元素下类型为div的第一个元素。设置其背景颜色为橙色。它的类型的定位是写在前面的那句。div
nth-of-type(n)选择器
这个:nth-of-type(n)选择器和nth-child(n)选择器类似，最主要的区别就是在原来的基础上给它又添加了一个条件就是类型。
其中它的参数n可以是具体的整数，也可是表达式，还可以是关键词。
看个例子。
.wrapper > p:nth-of-type(2n){
background: orange;
}
设置wrapper父类下所有的p类型的子类的偶数个的背景颜色为橙色。
last-of-type选择器
:last-of-type选择器和:first-of-type选择器功能一样，不同的是它选择的父元素下某个类型的最后一个元素。
.wrapper > p:last-of-type{
background: orange;
}
注意：div:last-of-type他们两个之间不能有空格。
nth-last-of-type(n)选择器
“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。
.wrapper > p:nth-last-of-type(3){
background: orange;
}
从最后一个倒数往前数，个性吧！
only-child选择器
:only-child选择器是父元素里面只有一个子元素的时候，仅有一个子元素，而且是唯一的一个子元素。
ul > li:only-child{
background:orange;
}
only-of-type选择器
:only-of-type选择器和上面相似，只是在上面的基础上又添加了一个条件，类型。
.wrapper > div:only-of-type{
background:orange
}
:enabled选择器 和disabled选择器
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。设置表单元素不可用状态就用:disabled
input[type="text"]:disabled{
background:#ccc;
border:2px solid red;
}
还有：
input[type="text"]:enabled{
background:#ccc;
border:2px solid red;
}
html
<form action="#">
<div>
<label for="enabled">可用输入框:</label>
<input type="text" id="enabled" />
</div>
<div>
<label for="disabled">禁用输入框:</label>
<input type="text" id="disabled" disabled="disabled" />
</div>
</form>
checked选择器
在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
}
.wrapper {
margin-bottom: 10px;
}
.box {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
position: relative;
background: orange;
vertical-align: middle;
border-radius: 100%;
}
.box input {
opacity: 0;
position: absolute;
top:0;
left:0;
width: 100%;
height:100%;
z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}
.box span {
display: block;
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
background: #fff;
top: 50%;
left:50%;
margin: -5px 0 0 -5px;
z-index:1;
}
input[type="radio"] + span {
opacity: 0;
}
input[type="radio"]:checked + span {
opacity: 1;
}
input[type="radio"] + span {}这句话的意思是type为radio的兄弟元素span.
::selection选择器
::selection选择器是用来选择 当用鼠标选择文本时应该显示的背景颜色和字体颜色等。
::-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-write选择器
“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
设置为只读状态。
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
看到这里就已经懵逼了，所以去看了一下这个《css3实现图片阴影效果》中的第1-6小节。才看明白了。
::before和::after这个两个主要是用来给元素的前面或者后面插入内容的，插入的内容你可以通过content来设置。在这一章的例子里，我们学到了很多知识。
现在一一总结一下：
1、单冒号(:)用于css3伪类，双冒号(::)用于css3伪元素，为了兼容，我们可以使用单冒号来代替双冒号。
2、我们可以通过绝对定位的`top bottom left right`来设置大小宽高，当然它们四个缺一不可。
3、box-shadow如果想要设置四面都有阴影的话，可以设置x,y的阴影为0，阴影宽度是10.
4、border-radius:100px / 10px 的意思是 第一个100px表示水平方向的半径，而第二个10px表示竖直方向的半径。
5、 z-index:-1;是表示显示在下面，而不是上面。
大家可以看这个 CSS3的border-radius属性详解
css代码：
<style>
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.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;
}
</style>
网友评论