一、属性选择器：（E：element;attr:attribute）
1、E[attr] 只使用属性名，但没有确定任何属性值；
2、E[attr="value"] 指定属性名，并指定了该属性的值；
3、E[attr~="value"] 指定属性名，并且具有属性值，此属性值是一个词属性，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的~不能不写。
如：<p miaoV="text ob try01"></p>
<p miaoV="text ob try02"></p>
<p miaoV="text ob try03"></p>
使用属性选择器：
p[miaoV];
p[miaoV="text"];
p[miaoV~="try02"]{background=red};
4、E[attr^="value"] 指定属性名，并且具有属性值，此属性值是以value开头的。
5、E[attr$="value"] 指定属性名，并且具有属性值，此属性值是以value结束的。
6、E[attr*="value"] 指定属性名，并且具有属性值，此属性值是包含了value的。
例如： <p miaoV="old"></p>
<p miaoV="young"></p>
<p miaoV="child"></p>
使用属性选择器：
p[miaoV^="y"]选择的是属性miaoV的值以y开头的p元素；
p[miaoV$="d"]选择的是属性miaoV的值以d结尾的p元素；
p[miaoV*="d"]选择的是属性miaoV的值包含d的p元素；
7、E[attr|="value"] 指定属性名，并且属性值是以value,或者value-开头的值。
例如：<p miaoV="zg-old"></p>
<p miaoV="zg-young"></p>
<p miaoV="child"></p>
<p miaoV="zg"></p>
属性选择器：
p[miaoV|="zg"],选择的是1、2、4行的P元素；
二、结构选择器
1、p:nth-child(1) 找到p标签的父元素下的第一个子元素；并且这个子元素必须是p标签
p:nth-child(odd) 奇数项
p:nth-child(even) 偶数项
p:nth-last-child(1)倒数第一项；倒着数的。
p:nth-child(2) 选择父元素下的第二个子元素，如果这个元素是p标签这起作用，如果不是则没效果。
2、p:nth-of-type(2) 选择父元素的第二个p标签
3、E：first-child=E:nth-child(1)
4、E：last-child=E:nth-last-child(1)
5、E:first-of-type=E:nth-of-type(1);
6、E：last-of-type=E:nth-last-of-type(1);
三、伪类和伪类选择器
1、E:target 表示当前的url片段的元素类型，这个元素必须是E；
如： <a href="#div1"></a>；
<a href="#div2"></a>；
<a href="#div3"></a>；
div:target{display:block}
点击哪一个a标签，div:target就表示哪一个a标签的href值
2、E：disabled 表示不可点击的表单控件；
3、E：enabled 表示可点击的表单控件；
4、E：checked 表示已选中的checkbox或radio;
5、p:first-line{} 文本段落的第一行样式
6、p:first-letter{} 文本段落的第一个字符的样式，设置后，第一个字符不能被选中
7、p::selection{} p标签在用户选中其文字时的样式。
8、p::before{ 表示在p元素前面添加内容，
content:"";
}
9、p::after{ 表示在p元素末尾添加内容，
content:"";
}
10、p:not(.class名) 排除某个元素；
11、p~h1{} p元素的下一个元素。常用于改变默认复选框样式。