1.属性选择器
HTML
<p name="a">用于选取带有指定属性的元素</p> <p name="line">用于选取带有指定属性和值的元素</p> <p name="line1 line2">此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词</p> <p name="b">用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。</p> <p name="mline">匹配属性值以指定值开头的每个元素</p> <p name="mlines">匹配属性值以指定值结尾的每个元素</p> <p name="mliKnes">选择器匹配属性值包含指定值的每个元素</p>
CSS
/*
css属性选择器
[attr]用于选取带有指定属性的元素
[attr=value]用于选取带有指定属性和值的元素
[attr~=value]此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
[attr|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attr^=value]匹配属性值以指定值开头的每个元素
[attr$=value]匹配属性值以指定值结尾的每个元素
[attr*=value]选择器匹配属性值包含指定值的每个元素
*/
p{
border: 1px solid #000;
500px;
}
p[name]{
background: pink;
}
p[name=line]{
background: red;
}
p[name~=line2]{
background: #00CC99;
}
p[name|=b]{
background: #880000;
}
p[name^=m]{
background: #6347ED;
}
p[name$=s]{
background: yellow;
}
p[name*=K]{
background: fuchsia;
}
2.伪类选择器
（1）结构性伪类选择器
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素
:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
:only-child 选择器匹配属于其父元素的唯一子元素的每个元素
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型,odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素,等同于 p:nth-last-child(1)
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数
（2）文字伪类
:first-letter 选择器用于选取指定选择器的首字母
:first-line 选择器用于选取指定选择器的首行
（3）链接伪类
:link 选择器用于选取未被访问的链接
:visited 选择器用于选取已被访问的链接
:active 选择器用于选择活动链接，当您在一个链接上点击时，它就会成为活动的（激活的）
:hover 选择器用于选择鼠标指针浮动在上面的元素
（4）表单伪类
:focus 选择器用于选取获得焦点的元素
:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）
:disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）
:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框），只有 Opera 支持 :checked 选择器
（5）
兼容性：所有主流浏览器均支持 ，除了 IE8 及更早的版本
:empty 选择器匹配没有子元素（包括文本节点）的每个元素
:root 选择器匹配文档根元素，在 HTML 中，根元素始终是 html 元素
:target 选择器可用于选取当前活动的目标元素，URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)
:not(selector) 选择器匹配非指定元素/选择器的每个元素
::selection 选择器匹配被用户选取的选取是部分，只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline