HTML5与CSS3选择器/常用的效果学习总结
HTML5正式推荐标准（W3C Recommendation）是2014年10月28日 W3C： World Wide Web Consortium 万维网联盟 的HTML5工作组正式推荐的标准。
在HTML5中，元素的标记可以省略，具体来说，元素的标记分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。让我们来针对这三种情况列举一个元素清单，其中包括HTML5中的新元素。
“不允许写结束标记”是指，不允许使用开始标记与结束标记将元素括起来的形式，只允许使用“<元素/>”的形式进行书写。
“可以省略结束标记”是指，该元素可以完全 被省略，请注意，即使标记被省略了，该元素还是以隐式的方式存在的。例如将body元素省略不写时，但它在文档结构中还是存在的，可以用document.body进行访问。
1.不允许写结束标记的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
2.可以省略结束标记的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
3. 可以省略全部标记的元素有：html、head、body、colgroup、tbody
另外 ，html5在指定属性值时做了一些改进，在属性值不包括“<”、">"、"="、单引号、双引号等字符时，属性值两边的引号可以省去。例如：
<input type="email">
<input type=email>
<input type='email'>
三种表达形式功能相同。
总结HTML5的新特性
HTML5浏览器的兼容情况
Chrome 15.0.874，IE 9.0.8112，Firefox 8.0.1，Opera 11.52 （国内）360浏览器 4.0.3.8，搜狗浏览器 3.1.0.3688，遨游浏览器v3.2.2.1000，QQ浏览器 6.8(10793)
HTML5兼容绝大部分主流浏览器 IE浏览器兼容IE9+
学习网站：
H5中国 ：http://www.html5cn.org/
H5之家 ：http://www.h5cn.com/
H5技术门户 ：http://www.html5china.com /*需要翻墙*/
H5研究小组 ：http://www.mhtml5.com/ /*需要翻墙*/ 网速好的当我没说
CSS3 动画过渡属性 transition 浏览器支持情况 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果
其中这四个属性 分别的属性代表是
transtion-property
规定应用过渡的 CSS 属性的名称、 / none 没有属性会获得过渡效果。 / all 所有属性都将获得过渡效果。 / property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
定义过渡效果花费的时间。默认是 0。 time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。
规定过渡效果的时间曲线。默认是 "ease"。
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果 cubic-bezier(0.25,0.1,0.25,1) |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
规定过渡效果何时开始。默认是 0。 延缓的时间 transition-delay 属性规定过渡效果何时开始。 time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。
1.<!DOCTYPE html>2.<html>3. <head>4. <metacharset="UTF-8">5. <title></title>6. <styletype="text/css">7. div{width:200px; height:200px; background: pink;8. /*transition过渡属性 all 代表着全部的变化 1s 代表着运动花费的时间 linear 代表着匀速运动 1s 代表着延缓时间*/9. transition: all 1s linear 1s;10. }11. div:hover{width:300px; height:300px; background: plum;}12. </style>13. </head>14. <body>15. <div></div>16. </body>17.</html>
css3 选择器
1、基本选择器
| 选择器 | 类型 | 功能描述 |
| * | 通用元素选择器 | 选择文档中所有的html元素 使用#box * { } 这样便找到了ID为box的标签与标签中的所有子元素 |
| E | 元素选择器 | 选择指定的类型的html元素 如p a span div ul 等等都标签选择器 |
| #id | ID选择器 | 选择指定ID属性值为“id”的任意类型的元素 ID选择器 需要保证唯一性 |
| .class | 类选择器 | 选择指定的class属性值为“class”的任意类型的任意多个元素 类选择器 可以重复使用 |
| selector1，selector2 | 群组选择器 | 将每一个选择器匹配的元素集合并 可以同时匹配多个class 或者标签 中间用逗号隔开 |
2、 层次选择器
| 选择器 | 类型 | 功能描述 |
| E F | 后代选择器 | 选择匹配的F元素，且F元素被包含在匹配的E元素内 选择的是所有的子孙后代所有标签 |
| E > F | 子选择器 | 选择匹配的F元素，且F元素是E元素的子元素 子代选择器 选择字辈的标记 有时候有继承如同后代需要注意！ |
| E + F | 相邻兄弟选择器 | 选择匹配的F元素，且F元素是E元素后面紧邻的兄弟元素 相邻后面开始的第一个标签 <单选> |
| E ~ F | 通用选择器 | 选择匹配的F元素，且F元素是E元素后面的所有兄弟元素 从相邻背后开始所有的标签 <多选> |
3、属性选择器
E[attr]
1.p{height:30px;border:1px solid #000;}
2.p[cat]{background:red;} /*找到所有包含有属性cat的p*/
3.
4.<h1align="center">css3属性选择器</h1>
5.<pcat="leo">leo</p>
6.<pcat="dp">杜鹏</p>
7.<pcat="zM">子鼠</p>
8.<pcat="xm">小美</p>
E[attr=val]
1.p{height:30px;border:1px solid #000;}
2.p[cat=leo]{background:red;} /*找到所有cat自定义属性等于leo的p标签*/
3.
4.<pcat="leo">leo</p>
5.<pcat="dp">杜鹏</p>
6.<pcat="zM">子鼠</p>
7.<pcat="xm">小美</p>
E[attr|=val]
1.p{height:30px;border:1px solid #000;}
2.p[cat|=b]{background:#C3C;} /*找到p标签中 所有具有cat属性 并且为b或者 b- 开头的p标签*/
3.
4.<pcat="b-leo">leo</p>
5.<pcat="bleo">杜鹏</p>
6.<pcat="b-leo">子鼠</p>
7.<pcat="g-xm">小美</p>
8.<pcat="b">无名氏</p>
E[attr~=val]
1.p{height:30px;border:1px solid #000;}
2.p[cat~=old]{background:red;} /*找到所有自定义属性中含有完整的old的p标签 不完整或者被拆分不算*/
3.
4.<pcat="leo old">leo</p>
5.<pcat="dp">杜鹏</p>
6.<pcat="zM">子鼠</p>
7.<pcat="xm">小美</p>
E[attr*=val]通配符
1.p{height:30px;border:1px solid #000;}
2.p[cat*=d]{background:#C3C;} /*找到cat属性中含有d的所有p标签*/
3.
4.<pcat="bleo old">leo</p>
5.<pcat="bdp">杜鹏</p>
6.<pcat="bzM">子鼠</p>
7.<pcat="gxm">小美</p
设置 E[attr*=val] a标签中是否含有文档后缀的背景文档图 当含有的时候 更改背景图片
p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}
p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}
p a[href*=doc]{background:url(img/w.gif) no-repeat 3px center;}
p a[href*=text]{background:url(img/text.gif) no-repeat 3px center;}
p a[href*=pdf]{background:url(img/x.gif) no-repeat 3px center;}
p a[href*=exl]{background:url(img/ppt.gif) no-repeat 3px center;}
<p>
<ahref="http://www.baidu.com/doc/javascript.html">css3复习</a>
</p>
<p>
<ahref="http://www.baidu.com/text/javascript.html">css3复习</a>
</p>
<p>
<ahref="http://www.baidu.com/pdf/javascript.html">css3复习</a>
</p>
<p>
<ahref="http://www.baidu.com/exl/javascript.html">css3复习</a>
</p>
E[attr^=val]起始符
1.p{height:30px;border:1px solid #000;}
2.p[cat^=g]{background:pink;} /*找到所有cat属性开头是g的p标签*/
3.
4.<pcat="bleo old">leo</p>
5.<pcat="bdp">杜鹏</p>
6.<pcat="bzM">子鼠</p>
7.<pcat="gxm">小美</p>
E[attr$=val]结束符
1
.p{height:30px;border:1px solid #000;}
2.p[cat$=M]{background:#CC0;} /*找到是cat属性 结尾是M的p标签 */
3.
4.<pcat="bleo old">leo</p>
5.<pcat="bdp">杜鹏</p>
6.<pcat="bzM">子鼠</p>
7.<pcat="gXM">小美</p>
4、结构伪类选择器语法
| 选择器 | 功能描述 |
| E ： first-child | 作为父元素的第一个子元素的E元素 span:first-child 找到所有父盒子中含有并且是第一个的标签如span:first-child 找的是所有 含有子标签第一个是span的span标签 包括body这个节点下第一个span |
| E ： last-child | 作为父元素的最后一个子元素的E元素 span:last-child 找到所有作为父盒子中含有span标签 |
| E F：nth-child（n） | 选中的F元素是E元素的第n个子元素 div div:nth-child(2) 选择是父盒子div 中 子元素第二个是div的div元素 |
| E F： nth-last-child（n） | 选中的F元素是E元素的倒数第n个子元素 div div:nth-last-child(1) |
| E ： nth-of-type（n） | 选择父元素内具有指定类型的第n个E元素div div:nth-of-type(1) 选择的是含有 div 的里面的第二个子元素 div 标签 这里可以判别类型 根据需要的类型进行选择 |
| E ： nth-last-of--type（n） | 选择父元素内具有指定类型的倒数第n个E元素div div:nth-last-of-type(1) 选择的是div |
| E ： first-of-type | 选择父元素内具有指定类型的第1个E元素 div :first-of-type 找到所有父盒子中的第一个 div |
| E ： last-of-type | 选择父元素内具有指定类型的倒数第1个E元素 div:last-of-type{background: wheat;} 找到所有 |
| E ： only-child | 选择父元素内只包含一个子元素,且该元素是E元素 a:only-child 这是找到只含有一个子元素是a标签的a标签 |
| E ： only-of-type | 选择父元素内只包含一个类型的子元素，且该元素是E元素 a:only-of-type 与only-child 都是父盒子中唯一的 |
总结 ： 有type 的就是指定类型 而不限定是否是父元素中的 第一个不符合该类型的元素
当没有 type 的时候就是 所有父盒子中指定的第几个 标签 是否符合要求 符合要求 就找到否则就是 没有找到
first-child选择器和:last-child选择器
前者表示单独选择某类元素的第一个元素，后者表示单独选择某类元素的最后一个元素。
1 #list li:first-child{color:#000; background:#fff;}/*选择#list的第一个子元素li*/2 #list li:last-child{color:#666; background:#dfdfdf;}/*选择#list的最后一个子元素li*/
nth-child选择器和:nth-last-child选择器
选择任何一个子元素
根据奇偶数判断，英文里面的奇数是odd，偶数是even，所以我们只需要给这两个选择器传入odd或even就能筛选出奇数行或偶数行。
1 #list li:nth-child(odd){color:#000; background:#f2f2f2;}/*奇数行*/2 #list li:nth-child(even){color:#666; background:#dfdfdf;}/*偶数行*/
比如我想选择列表中的第二个子元素li，那么只需要li:nth-child(2){}即可，如果想要选择倒数第二个子元素li，那么只需要li:nth-last-child(2){}即可
1 #list li:nth-child(2){color:#000; background:#fff;}/*选择#list的第二个子元素li*/2 #list li:nth-last-child(2){color:#666; background:#dfdfdf;}/*选择#list的倒数第二个子元素li*/
循环使用样式：使用nth-child选择器，给它的参数是表达式
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <metacharset="gb2312">
5 <title>CSS3选择器-结构性伪类选择器</title>
6 <styletype="text/css">
7*{margin:0; padding:0;}
8#list{font-family:"Microsoft yahei"; font-size:14px;}
9#list li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
10#list li:nth-child(4n+1){background:#900;}/*从第一行开始算起 每隔4个（包含第四个）使用次样式*/11
#list li:nth-child(4n+2){background:#090;}/*从第二行开始算起 每隔4个（包含第四个）使用次样式*/12
#list li:nth-child(4n+3){background:#009;}/*从第三行开始算起 每隔4个（包含第四个）使用次样式*/13
#list li:nth-child(4n+4){background:#990;}/*从第四行开始算起 每隔4个（包含第四个）使用次样式*/14
</style>
15 </head>
1617 <body>
18 <ulid="list">
19 <li>选项01</li>
20 <li>选项02</li>
21 <li>选项03</li>
22 <li>选项04</li>
23 <li>选项05</li>
24 <li>选项06</li>
25 <li>选项07</li>
26 <li>选项08</li>
27 <li>选项09</li>
28 <li>选项10</li>
29 <li>选项11</li>
30 <li>选项12</li>
31 </ul>
32 </body>
33 </html>
nth-of-type选择器和nth-last-of-type选择器
只针对同类型的子元素进行计算
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <metacharset="gb2312">
5 <title>CSS3选择器-结构性伪类选择器</title>
6 <styletype="text/css">
7*{margin:0; padding:0;}
8#list{font-family:"Microsoft yahei"; font-size:14px;}
9#list dt,#list dd{height:30px; line-height:30px; text-align:center; list-style:none; color:#fff;}
10#list dd{color:#000;}
11#list dt:nth-of-type(odd){background:#900;}/*奇数行*/12 #list dt:nth-of-type(even){background:#090;}/*偶数行*/13 </style>
14 </head>
1516 <body>
17 <dlid="list">
18 <dt>我爱前端</dt>
19 <dd>前端的学习笔记</dd>
20 <dt>我爱前端</dt>
21 <dd>前端的学习笔记</dd>
22 <dt>我爱前端</dt>
23 <dd>前端的学习笔记</dd>
24 <dt>我爱前端</dt>
25 <dd>前端的学习笔记</dd>
26 <dt>我爱前端</dt>
27 <dd>前端的学习笔记</dd>
28 </dl>
29 </body>
30 </html>
only-child选择器
选择只有1个子元素的元素
1 ul li:only-child{background:#900;}/*选择只有1个子元素LI的元素*/
5、文本新增伪类
| 选择器 | 功能描述 |
| E ：： first-letter | 选择文本块的第一个字母 |
| E ：： first-line | 选择文本快的第一行 |
| E ：： before 和E ：： after | 主要用于清除浮动 |
| E ：： selection | 选中的E元素 可以改变当文字被选中时背景颜色 |
before / after 可以不加 ：： 加一个就行了 但是：： selection 属性必须在前面加
p{width:300px;border:1px solid #000;font:12px/30px "宋体";padding:10px;}
p:first-line{ background:red;} /*设置p标签中第一行的第一个字*/
p:first-letter{ font-size:30px;} /*设置p标签中第一行的文本*/
p::selection{background:#F60;color:#690;} /*设置文本被选中后的样式 */
p:before{ content:"cat"; display:block; border:1px solid #000;} /*设置在p标签之前插入一个*/
p:after{ content:"cat"; display:block; border:1px solid #000;}
<p>前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁，
在 HTML5&CSS3 被炒至沸沸扬扬的今天，全面系统的掌握此项技能，是加重技术含金量的重要砝码！
</p>
| #news:target | 选择当前活动的 #news 元素。 | |
| input:enabled | 选择每个启用的 <input> 元素。 | |
| :disabled | input:disabled | 选择每个禁用的 <input> 元素 |
| input:checked | 选择每个被选中的 <input> 元素。 | |
| :not(p) | 选择非 <p> 元素的每个元素 选择除了( ) 中选择器之外的标签元素 | |
| :focus | input:focus | 选择获得焦点的inout元素 |
| E ： root | :root 选择器匹配文档根元素。 在 HTML 中，根元素始终是 html 元素。 可以使用 ：root 设置 页面的颜色 | |
| E ： empty | 选择没有子元素的元素 选择没有子元素的每个 元素（包括文本节点） 找到为空的节点 | |
:target 选择器
使用其选择器来对页面中的target元素（该元素的ID被当作页面中的超链接）指定的样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用
div{width: 400px;height: 400px;font: 40px/400px "微软雅黑";background: #000;color: #fff;margin-bottom: 2px;display: none;text-align:center;}
div:target{display: block;}
<ahref="#div1">div1</a>
<ahref="#div2">div2</a>
<ahref="#div3">div3</a>
<divid="div1">div1</div>
<divid="div2">div2</div>
<divid="div3">div3</div>
/*input:enabled{color: red;}*/
input:disabled{color: red;}
input:checked{width: 50px;height: 50px;} //当选中时 触发 让宽高发生变化
<inputtype="text"name=""id=""value="输入信息"disabled="disabled"/>
<inputtype="radio"/>
当元素内容为空白的时候，使用其所定义的样式
:not 选择器
如果想对某个结构元素使用样式，但是又想排除这个个元素下面的某个子元素，让它不使用此样式，可以使用:not选择器。
:root 选择器
此选择器将绑定到页面的根元素中，所谓根元素，是指文档树中最顶层的元素，也就是<html>部分
6925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
