http://www.cnblogs.com/ruanmou/p/4832214.html
一、特殊选择器
1、*用于匹配任何的标记
2、>用于指定你子节点关系
<div id="d1"> <span>span</span>//定位此行 <div> <span>span</span> </div> </div>
#d1>span{ font-size:20px;}
3、+ 毗邻相同元素选择器
<div id="d1"> <span>span</span> <div> <span id="s1">span</span> //此行后不能写任何其它的标签 <span>span1</span>//定位此行 <span>span2</span> </div> </div>
#s1+span{ color:Red;}
4、~匹配所有元素之后同级的相同元素
<div id="d1"> <span>span</span> <div> <span id="s1">span</span>//此行后可以写其它标签 <div>div span</div> <span>span1</span>//定位此行 <span>span2</span>//定位此行 </div> </div>
#s1+span{ color:Red;}
5、名称【表达式】
E[att]匹配所有具有att属性的E元素([att]获取了所有的定义了att属性标签; [att=val]获取所有定义了att属性等于val的元素
会根据符号的不同进行筛选 =等于... ^=以...开头 $=以...结尾 *=包含... ~=包含单词（测试后有效果等于） |=...或以...开头（测试后有效果等于）
<div id="d1"> <span>span</span> <div> <span id="s1">span</span> <div title="div">div span1</div>//定位到此行 <div title="divdf">div span2</div> <div title="d1iv3div">div span3</div>//定位到此行 <span>span1</span> <span>span2</span> </div> </div>
div[title$=div]{ color:Red;}
6、伪类/伪元素
伪类：可以替代class
first-child第一个元素 last-child最后一个元素
<p>
<i>first</i>//此行被选择 替代 <i class="i1"></i>
<i>second</i>
</p>
p>i:first-child{color:Red;}
1.a:hover,a:link,a:active,a:visited,:focus获取焦点,:blur图片模糊
<img id="img1" src="image/105.jpg" />
//-ms IE -moz FF -webkit google ie不起作用 ff直接写filter作用 谷歌起作用
#img1{ -ms-filter:blur(5px); -moz-filter:blur(5px); -webkit-filter: blur(5px)}
2 :disabled所有禁用的元素,:enabled所有没有被禁用的元素,:checked所有被选择的元素,:read-only所有只读的元素,:
read-write所有只写的元素 常用于input
<input type="text" disabled="disabled"> <input type="text" disabled="enabled">
<input type="checkbox" id="a" checked="checked" />//选择状态
input:checked{ width:100px;}
<input type="text" readonly="readonly" />//只读状态
input:read-only{ background-color:#ccc;}//只有google浏览器是起作用的。
<input type="text" readwrite="readwrite" value="dfdf" />
input:read-write{ background-color:#ccc;}//只有google浏览器是起作用的
获取选择单选框的ID
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function ShowChecked() { $("input[type=checkbox]").each(function () { if ($(this).is(':checked')) { console.info($(this).attr("id")); } }); } </script> </head> <body> <input type="checkbox" id="a" /> <input type="checkbox" id="b" /> <input type="checkbox" id="c" /> <input type="button" value="abc" onclick="ShowChecked()" /> </body> </html>
下面就是CSS3的内容了。
3、CSS3伪类
关键点：
p元素是父元素的第2个元素 <div><p>p1</p> <p>p2></p> </div>
p元素是父元素的第2个p元素<div><p>p1</p><div></div> <p>p2</p> </div>
:first-child p:first-child p元素是父元素的第一个元素<div> <p>p1</p> <p>p2</p></div>
:last-child p:last-child p元素是父元素的最后一个元素<div> <p>p1</p> <p>p2</p> </div>
:nth-child(n) p:nth-child(2) p元素是其父元素的第2个元素<div> <p>p1</p> <p>p2</p> </div>
:nth-last-child(n) p:nth-last-child(2) p是其父元素的倒数第2个元素<div> <p>p1</p> <p>p2</p></div>
:fisrt-of-type p:fisrt-of-type p元素是父元素的第一个p元素<div><div>div1</div> <p>p1</p> <p>p2</p></div>
:last-of-type p:last-of-type p元素是父元素的最后一个p元素 <div><div>div1</div> <p>p1</p> <p>p2</p> </div>
:nth-of-type(n) p:nth-of-type(2) p元素是父元素中的第二个p元素<div><div>div1</div> <p>p1</p> <p>p2</p> </div>
:nth-last-of-type(n) p:nth-last-of-type(2)p元素是父元素的倒数第二个p元素<div> <p>p1</p> <div>div1</div> <p>p2</p> </div>
:not p:not(.p1)针对class p元素中不包括class=p1的元素 <p class="p">p1</p> <p class="p1">p1</p>
伪元素：可以替代元素标签
<p>i am a girl</p> 替代<p><span>i</span> am a girl</p>
::first-letter第一个字母
::before元素里第一个位置插入内容 content:
::after元素里最后一个位置插入内容content:
::first-line 定位元素的第一行
::selection鼠标选择后的效果 默认蓝底白字
二CSS权重
<div class="main-content"><h3 id="d1" class="c1">hello hello hello hello hello hello hello hello </h3> </div>
/*红色 0*/ .main-content{ color:#f00;} /*蓝色 D*/ h3{ color:#00f;} /*绿色 C*/ .c1{ color:#0f0} /*黄色 CD*/ .main-content h3{ color:#ff0} /*紫色 CC*/ .main-content .c1{ color:#939} /*青色 B*/ #d1{ color:#0ff;} /*深绿色 BC*/ .main-content #d1{ color:#690;}
三、CSS3新增属性
1、文本：
text-shadow：文字阴影 text-shadow:5px 5px 5px #333,/*水平位移、垂直位移、模糊半径、颜色*/
text-indent:文字缩进
英文文本换行:word-wrap:break-word;/*断单词*/ word-break:break-all;/*断字符*/ white-space:nowrap;/*强制在一行内显示所有文本*/
文本溢出:text-overflow:clip;/*不显示省略标记，而是简单的裁切掉*/ text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记*/ overflow:hidden;
2、边框border-radius
3、阴影 box-shadow 5px 5px 5px #333,/*水平位移、垂直位移、模糊半径、颜色*/
4、背景图片铺满 background-size:cover
5、transform旋转 放大 transform:rotate(40deg) scale(1.2);/*顺时针旋转40度，放大1.2倍*/ transform:translate(40px,40px);/*水平偏移40px,垂直偏移40px*/ transform:skew(30deg,-10deg);/*水平倾斜30度，垂直倾斜10度*/
6、平滑过渡 transition transition:background-color 1s ease-in;/*过渡的属性，如果是所有的则是all，经历的时间，过渡效果*/
7、动画：animation:x-spin 20s infinite linear;/*动画名称，经历时间，播放次数(为infinite则一直播放)，播放方式
8、渐变：http://www.w3cplus.com/blogs/airen
/*线性渐变，开始位置，结束位置，开始的颜色，结束的颜色，色标（色标位置，色标颜色，可以有多个色标，色标即是颜色过渡点）*/
background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff));
/*径向渐变，内圆圆心位置，内圆半径，外圆圆心半径，外圆半径，开始颜色，结束颜色，色标*/
background:-webkit-gradient(radial, center center, 0, center center, 460, from(blue), to(red),color-stop(0.6,#fff));
9、响应式布局 分别写布局样式
@media screen and (min-900px)媒体屏幕大于900px
@media screen and (min-600px) and (max-900px)媒体屏幕大于600px小于900px
@media screen and (max-600px)媒体屏幕小于600px