属性选择器
HTML中可通过各种属性给元素增加很多附加信息。譬如，用id属性将不同div区分。CSS3新增的3个属性选择器使得属性选择器有了通配符的概念，也感觉像是正则表达式的样子。
E[att^="val"]
- E：选择匹配的元素E；
- att：元素E定义了属性att；
- ^：其属性值以val开头的任何字符串。
E[att$="val"]
$：其属性值以val结尾的任何字符串。
E[att*="val"]
*：其属性值任意位置包含了val。
结构性伪类选择器
根选择器
：root选择器匹配元素E所在的文档的根元素
否定选择器
：not选择器可选择除某个元素之外的所有元素
空选择器
：empty选择器表示的为空，选择没有任何内容的元素（空格都没有）
目标选择器
：target选择器匹配文档的url的某个标志符的目标元素
：first-child选择器
选择父元素的第一个子元素的元素E
：last-child选择器
选择最后一个子元素
：nth-child(n)
定位某个父元素的一个或多个特定的子元素，其中参数n：
- 可以为整数值，起始值为1，为0时选择不到任何元素
- 可以为表达式
- 可以为关键词（odd，even）
：nth-last-child（n）
从父元素的最后一个子元素开始计算，来选择特定的元素，其中n为多少即为倒数第几个子元素。
：first-of-type选择器
选择一个父元素的某个指定类型的第一个子元素
：nth-of-type（n）选择器
只计算父元素中指定的某种类型的子元素，定位某父元素的资源的不是同一种类型的
：last-of-type选择器
选择父元素的某个值得类型的最后一个子元素
：nth-last-of-type(n)选择器
从最后一个子元素开始，选择父元素中指定的某种子元素类型
：noly-child选择器
选择的父元素有且只有一个子元素
：only-of-type选择器
一个父元素有许多子元素，而其中只有一种类型的子元素是唯一的，选择器可选中这唯一类型的子元素
对于结构性伪类选择器，可以发现很多选择之间是有一定关系的，我画了图，这样看起来似乎更形象一些，
:enabled选择器
在Web的表单中，有些表单元素有可用和不可用状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
<input type="text" name="username" placeholder="输入你的大名">
<input type="password" name="password" placeholder="输入你的密码">
<style>
input[type="text"]:enabled{
border: 1px solid #f36;
box-shadow: 0 0 5px #f36;
}
</style>:disabled选择器
“:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。
<input type="text" name="username" placeholder="你输入不了任何东西" disabled />
<style>
input[type="text"]:disabled{
background: rgba(0,0,0,.15);
border: 1px solid rgba(0,0,0,.15);
color: rgba(0,0,0,.15);
}
</style>
:checked选择器
在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
::selection选择器
“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的。有的时候设计要求不使用浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。
<p class="test">选中这一段文字看一看选中之后的背景颜色和字体颜色的变化</p>
<p>选中这一段文字看一看选中之后的背景颜色和字体颜色的默认变化</p>
<style>
.test::selection{
background:orange;
color:white;
}
</style>:read-only选择器
“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”。
<input type="text" name="fixedaddress" flaceholder="江苏苏州" readyonly="readonly" />
<style>
input:read-only{
border-color:#ccc;
}
</style>:read-write选择器
“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
::before和::after选择器
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。