属性选择器
E[attr]:指定css样式对其具有attr属性的E元素（E：元素名称；[]内部的为属性名称）
E[attr=value]：指定该css样式对所有包含attr属性，且attr属性为value的元素
E[attr~=value]：指定该css样式所有包含attr属性，且attic属性的值为以空格隔开的系列值，其中某个值为value的E元素起作用
E[attr|=value]：指定该css样式所有包含attr属性，且attic属性的值为以连字符分割的系列值，其中第一个值为value的tag元素起作用
E[attr^="value"]：指定该css样式所有包含attr属性，且attic属性的值为以value开头的字符串E元素起作用
E[attr$="value"]：指定该css样式所有包含attr属性，且attic属性的值为以value结束的字符串E元素起作用
E[attr*="value"]：指定该css样式所有包含attr属性，且attic属性的值为包含value的字符串E元素起作用
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.b{
font-size: 30px;
}
.c{
color: #f00;
}
#a{
font-size: 20px;
color: #0f0;
}
p[id]{
background-color: #000;
}
p[class~=b]{
border: solid #000 1px;
}
p[class|=border]{
background-color: #00f;
}
</style>
<body>
<p class="b">p1</p>
<p class="b c">p2</p>
<p class="big b">p3</p>
<p class="c" id="a">p4</p>
<p class="border-1">p5——</p>
</body>
</html>
结构性伪类选择器
selector：root；匹配文档的根（html）元素，（css0.7.html）用于移动端
selector：first-child；匹配符合selector选择器，而且必须是其父级元素的第一个子节点
selector：last-child：匹配符合selector选择器，而且必须是其父级元素的最后一个子节点
selector：nth-child（n）；匹配符合selector选择器，而且必须是其父级元素的第n个子节点
selector：nth-last-child（n）；匹配符合selector选择器，而且必须是其父级元素的倒数第n个子节点
selector：only-child；匹配符合selector选择器，而且必须是其父级元素的唯一一个子节点
selector：first-of-type；匹配符合selector选择器，而与他同类型、同级别的兄弟元素中的第一个元素
selector：last-of-type；匹配符合selector选择器，而与他同类型、同级别的兄弟元素中的最后一个元素
selector：nth-of-type（n）：匹配符合selector选择器，而与他同类型、同级别的兄弟元素中的第n个元素
selector：nth-last-of-type（n）：匹配符合selector选择器，而与他同类型、同级别的兄弟元素中的倒数第n个元素
selector：only-of-type；匹配符合selector选择器，而且必须是其父级元素的唯一一个元素
selector：empty：匹配符合selector选择器，而且没有任何子元素（包括文本节点）
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-color: #ccc;
margin-top: 10px;
}
p:first-of-type{
border: 1px #f00 solid;
}
h2:first-child{
background-color: aqua;
}
</style>
</head>
<body>
<div class="one">
<h2>div1</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h2>div1-2</h2>
<p>p4</p>
<p>p5</p>
</div>
<div class="tow">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h2>div2</h2>
<p>p4</p>
<p>p5</p>
</div>
</body>
</html>
ui元素状态伪类
selector：link；匹配selector选择器且被访问前的元素（通常只能是超链接）
selector：visited；匹配selector选择器且已被访问过的元素（只能是超链接）
selector：active；匹配selector选择器且处于被用户激活的元素（在鼠标点击与释放之间的事件）状态的元素
selector：hover：匹配selector选择器且处于鼠标悬停状态的元素
selector：focus：匹配selector选择器且已得到焦点的元素
selector：enable：匹配selector选择器且当前处于可用状态的元素（不常用）
selector：disabled；匹配selector选择器且当前处于不可用状态的元素
selector：checked；匹配selector选择器且当前处于选中状态的元素
selector：default；匹配selector选择器且页面打开时处于选中状态（即使当前没有被选中亦可用）的元素（不常用）
selector：read-only：匹配selector选择器且处于只读状态的元素
selector：read-write；匹配selector选择器且处于读写状态的元素（不常用）
selector：：selection；匹配selector选择器中的元素中当前被选中的内容
上述伪类选择器中，伪类选择器前面的selector选择器可以省略，如果省略了该选择器。则selector将不作为匹配条件。而且：：selection选择器前面有两个冒号
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
::selection{
background-color: #f00;
}
input:focus{
background-color: #333;
color: #f00;
}
input:disabled{
opacity: 0.4;
}
input:checked{
width: 50px;
height: 50px;
}
input:read-only{
border: solid 1px #00f;
}
</style>
</head>
<body>
<form action="">
<p>用户名<input type="text" name="" id="" value="" /></p>
<p>密码<input type="password" name="" readonly/></p>
<p>性别<input type="radio" name="but" id="" value="" />男<input type="radio" name="but" id="" value="" />女</p>
<p><input type="button" name="" id="" value="不可用" disabled="" /><input type="submit" name="" id="" value="提交" /></p>
</form>
</body>
</html>
兄弟选择器
selector1~selector1{……}
兄弟选择器匹配与selector1对应的元素后面，能匹配selector2的兄弟节点
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
::selection{
background-color: #f00;
}
input:focus{
background-color: #333;
color: #f00;
}
input:disabled{
opacity: 0.4;
}
input:checked{
width: 50px;
height: 50px;
}
input:read-only{
border: solid 1px #00f;
}
h2~p{
border:1px solid #0ff;
}
</style>
</head>
<body>
<form action="">
<h2>兄弟选择器</h2>
<p>用户名<input type="text" name="" id="" value="" /></p>
<p>密码<input type="password" name="" readonly/></p>
<p>性别<input type="radio" name="but" id="" value="" />男<input type="radio" name="but" id="" value="" />女</p>
<p><input type="button" name="" id="" value="不可用" disabled="" /><input type="submit" name="" id="" value="提交" /></p>
<div>备注</div>
</form>
</body>
</html>
伪元素
伪元素是创造关于文档语言能够指定的文档树之外的抽象
伪元素选择器只能针对css中已有的伪元素起作用
：first-letter：该选择器对应的css样式对指定对象内的第一个字符串起作用
：first-line：该选择器对应的css样式指定对象内的第一行元素内容起作用
：before：该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容
：after：该选择器与内容相关的属性结合使用，用于在指定对象内部的尾端插入内容
伪元素与伪类之间的区别：伪元素是创造关于文档之外的抽象，伪类选择器是当前元素的某一个状态和一个属性
