css选择器总结 - 快车库

今天在做项目的时候，发现选择器有些遗忘。特写此文章来加深记忆，也方便自己日后回顾。

通用选择器 *

//有时候为了浏览器内置样式，可能会这样写。
//但一般不推荐！！！
*{ margin:0;padding:0; }

标签选择器 E

ID选择器 #myid

类选择器 .myclass

类选择器和ID选择器算是最常见两种选择器。
这里要讲一下关于选择器优先级。
优先级从高到低分别为：
内联样式、ID、class/属性选择器/伪类选择器[如:hover,:focus]等、元素选择器/伪元素选择器[如:before,:after]
如果两个优先级相同，则按照声明顺序，写在【样式表】后面的起作用。
【注意！是在样式表中的位置！而不是在使用的位置！】

<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
    <p class='classB classA'> 123 </p>
</body>

最后p的颜色显示为red！！！是写在样式表后面的.classB起作用！

属性选择器

E[disable] E中定义了disable属性的元素。E可省略，则表示选择定义了disable属性的任意类型的元素
E[att='val'] 匹配所有att属性等于val的E元素。E可省略，同上。

E[att~=key] 匹配att属性有key的元素,att属性是一个以空格符分隔的列表。

<a title="bar1 bar2 bar3"></a>
<a title="bar2 bar3 bar4"></a>
a[title~="bar1"]匹配第一个a元素

E[att|=es] 匹配E的元素，且att属性值是以es开头，att属性是用‘-’分隔的列表。
```
<body lang ="en-us"></body>
<body lang ="fr-argot"></body>
[lang|en] 匹配第一个body元素
```
E[att*="bar"] 匹配E的元素，且att属性值包含bar的子字符串。
E[att^="http://"] 匹配E的元素，且att属性以http://开头
E[att$=".png"] 匹配E的元素，且att属性以.png结尾

伪类选择器

E:link 被定义了超链接并未被访问
E:visited 被定义了超链接并已经访问
E:active 匹配元素被激活

E:hover 匹配元素正在被鼠标经过

【注意顺序：LVHA :link->:visited->:active:->:hover】
举个栗子。

a:link {color: blue;}
a:active {color: red;}
a:hover {color: magenta;}
a:visited {color: purple;}

由于优先级相同，按照先后顺序来显示。
一个未被访问过的链接可以同时是hover和active的状态，但是由于visited写在最后，所以会覆盖了:active和:hover的样式。那么这个链接都是紫色的,无法呈现:active和:hover的状态。

E:focus 匹配元素获取了焦点
E:first-child 匹配E的元素，且该元素是父元素的第一个子元素
E:last-child 父元素中最后一个位置，且匹配E的子元素
E:nth-child(n) 选择所有在其父元素中第n个位置的匹配E的子元素
E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素
E:nth-of-type(n) 在所有满足E的元素内的第n个元素
E:first-of-type 相当于E:nth-of-type(1)

E:last-of-type 相当于E:nth-last-of-type(1)

这里nth-child/nth-last-child和nth-of-type容易混淆。
<div>
    <h1></h1>
    <p>123</p>
    <p>456</p>
</div>

p:nth-of-type(2){color:red;}
p:nth-child(2){color:blue;}

效果：
123为蓝色。p:nth-child(2)匹配其父元素中第二个位置的p元素。若div元素第二个位置元素不是p元素，则不起作用。
456为红色。p:nth-of-type(2)匹配div中所有p元素中的第二个。

E:empty 匹配E的元素，且不包含子节点。【文本也属于节点】
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
E:not(s) 否定伪类选择器。匹配E且不满足s选择符的元素。
E:root 匹配文档根元素
E::selection 匹配当前选中的元素
E:checked 匹配E的所有被选中UI元素radio/checkbox
E:enabled 匹配E的所有可用UI元素

E:disabled 匹配E的所有不可用UI元素

在网页中，UI元素一般是指包含在form元素内的表单元素
<form>
    <input type="text" />
    <input type="button" disabled="disabled" />
    <input type="checkbox" />
    <input type="radio" checked="checked" />
</form>

input:checked 匹配单选按钮，不匹配复选框
input:enabled 匹配文本框，复选框，单选按钮，不匹配button
input:disable 匹配button

关系选择器

A E 后代选择器。匹配E，且是被包含在A内的元素。只要是A的后代即可。
A > E 子包含选择器。匹配E的元素，且是A元素的子元素！只能是子元素，不能是孙元素等。。
B + E 相邻兄弟选择器。匹配E的元素，该元素位于B后面相邻位置！
A ~ E 通用兄弟选择器。匹配E的元素，该元素位于E元素的后面，且在同一级结构。即兄弟位置。

伪元素选择器

E:first-line E元素内第一行文本
E:first-letter E元素内第一个字符
E:before 在E元素之前插入生成内容
E:after 在E元素之后插入生成的内容

之前利用选择器和css3动画写了一个筛选菜单的效果。
github地址如下：https://github.com/Lsxj/css3/tree/master/css-filter
效果如下：