1. css选择器优先级
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式>内联样式>id选择器>类选择器>标签选择器>通配符选择器>浏览器自定义或继承
2.伪类选择器
（1）CSS3新增属性选择器
[att*=val]选择属性值包含val的指定字符
[att^=val]选择具有att属性且属性以val为开头的字符串
[att$=val]实现尾字符选择
例：[id*=section]{
background:green;
}
[id^=s]{
background:pink;
}
<!--实现网页后追加效果-->
<style type="text/css">
a[href$=html]:after{
content:"网页文件";
color:green;
}
</style>
<a href="boke.html">网站首页</a>
<style type="text/css">
<!--规定元素的左边缘-->
p.left{
text-align:left;
}
</style>
<p class="left">~~~~</p>
链接相关的伪类选择器：
未被访问的链接：
a:link{
color: black;
}
访问过的链接样式：
a:visited{
color:red;
}
鼠标放上去的样式：
a:hover{
color:green;
}
鼠标点击时的颜色：
a:active{
color:#ff6600;
}
3.伪元素选择器
fist-line：用于某元素中第一行元素使用样式
first-letter：某元素中文字首字母（欧美文字）
before:用于某元素前插入内容
afer：上同before
li:before{
content:"~~~~~";
}
4.结构性伪类选择器-1
:body{
background:white;
}
not选择器
例：<style>
body*:not(h1){
background:white;
}
</style>
empty选择器：选择没有任何子元素的选择器
:empty{background:#000000;}
target选择器：对某页面某个target元素指定样式，该样式只在用户点击页面中的超链接并跳转到target后起作用
例：
<style>
:target{
background:#000;
color:#fff;
}
</style>
---
<a href="#A">A</a>
<a href="#B">B</a>
5.结构性伪类选择器-2
first-chirld:单独指定一个子元素样式；
last-chirld:单独指定最后一个子元素样式
nth-chirld:匹配正数下来第N个元素
nth-last-chirld：选择匹配倒数下来第N个元素
例：
<style>nth-child(odd){
background:yellow;
}
</style>
nth-of-type和nth-last-of-type: 统计的时候只针对同类型的子元素进行计算
h2:nth-of-type(odd){
background:#CCCCCC;
}
6.UI元素状态伪类选择器
1.
hover：鼠标指针移动到元素上
active：鼠标元素被激活时的样式
focus：获得焦距点并输入时；
例：input[type="text"]:hover/focus/active{
background:green;
}
2.enable和disable伪类选择器
enable：指定当元素可用状态下的样式
disable：当元素不可用状态下的样式
3.read-only和read-write
read-only:被用来指定当元素处于只读状态时样式
read-write：与read-only相反
4.
checked：指定当表单中的radio单选框或者CheckBox复选框处于选取状态时的样式
default：用来指定当页面打开时默认处于选取状态的单选框或者复选框的控件
indeterminate：指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框样式
<style>
input[type="checkbox"]:checked{
outline:2px solid green; }
</style>
<form>
<input type="checkbox">
</form>
5.selection伪类：元素选中状态时的样式
<style>
:selection{
background:#ffff00;
color:#fff;
}
</style>
6.invalid伪类选择器和valid伪类选择器
input里的值是合法的样式：valid
input里的值是非法的值的样式：invalid
例：
input[type="email"]:invalid{
color:red;
}
input[type="email"]:valid{
color:green;
}
7. required伪类和optional伪类选择器
例：
<style>
input[type="text"]:required{
background:green;
color:#fff;
}
</style>
<input type="text" placeholder="请输入姓名" required>
原文：http://www.cnblogs.com/wujun296013/p/6409630.html