css其他选择器

（使用E指元素element，attr代指属性attribute，val代指属性值value。）

属性选择器

属性选择器就是指定属性以及属性值来进行选择。

E[attr]{}

选择具有attr属性的E元素。对于属性值没有要求。
也可以再添加其他属性要求，比如E[attr1][attr2]，这就是要求同时具有attr1和attr2属性的元素。

E[attr="val"]{}

选择属性att的属性值为val的E元素。

E[attr^="val"]	选取了元素E，其中E元素定义了属性att，att属性值是以val开头的任何字符串。
E[attr$="val"]	 选取了元素E，其中E元素定义了属性att，att属性值是以val结尾的任何字符串。
E[attr*="val"]	选取了元素E，其中E元素定义了属性att，att属性值任意位置是包含了val的任何字符串。

优先级：行内样式>id选择器>类选择器>属性选择器

伪元素选择器

E::first-letter{};
E::first-line{};

选取E元素内第一个/行字符，设置样式。

E::before{content:" ";};
E::after{content:" ";};   

在E元素之前/后插入content后面的内容，与content属性联用。包括：
content:attr(title); // 使用标签属性值
content:"string"; // 填写字符串
content:"\21e0"; //获取字符集图标 斜杠就是转义 不过有一些图标在浏览器直接是有一些差别
content:url(123.gif); //使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
可以混合使用，例如content: " (" attr(href) ")"; //获取url并添加（）

E::selection{}

设置元素被选择时的颜色（默认选中时为蓝底白字）。

伪类选择器

E:伪类 {attr:"val"}

动态伪类
特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。
动态伪类包含两种，第一种是在链接中常看到的锚点伪类，如":link",":visited"，另外一种被称作用户行为伪类，如“:hover”,":active",":focus"。

a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

其中":focus"主要针对HTML中input元素，用来指定表单元素获得光标焦点时使用的样式。

input:focus{};

结构伪类选择器

E1>E2:first-child选择某个元素的第一个子元素；
E1>E2:last-child选择某个元素的最后一个子元素；
E1>E2:nth-child(n)选择某个元素的一个或多个特定的子元素；

n可以是具体的数，可以是odd（奇数）或even（偶数），也可以是n的表达式（2n+1）。>（大于号）与空格的区别在于大于号只选择子类元素，空格选择所有后代元素。

E:first-of-type选择一个上级父元素下相同E元素中的第一个；
E:last-of-type选择一个上级父元素下相同E元素中的最后一个；
E:nth-of-type(n)选择一个上级父元素下相同E元素中的第n个；

例如：

ul>li:nth-child(even)=li:nth-of-type(even)

这两句效果相同，都是选择ul元素内的偶数li标签。