CSS选择器（selector）汇总（含c3）

选择器计算权重

一：值为 1000 ，内联样式 在标签内写入style属性。
二：值为0100，id选择器，如： #id名。
三：值为0010，class选择器、伪类选择器、属性选择器，如：.class名。
四：值为0001，标签选择器、伪元素选择器 、如：div{}。
五：值为0000，通配符选择器、子选择器、相邻选择器，如：*{} >等。

等级最高：！important
!important 的作用是提升优先级，加了这句的样式的优先级是最高的。大于内联样式（把！important加在分号前面）

基础选择器

通配符选择器 ： 使用*号、选择所有元素。
标签选择器 ：标签名+{}。
类选择器 ：给标签设置class属性，使用英文点+类名{}使用。
ID选择器： 给标签设置通用属性、id，使用#id名{}使用
注意 id选择器唯一的，但这个‘唯一’不是说一个id名只能出现一次，而是说一个标签里只能有一个id。
但是编程规范，id名在一个文档里有且只有一个。
举个栗子：

组合选择器

群组选择器：使用逗号 ，如：div,p。
子代选择器：使用>，如 div>p 匹配所有div的子元素p。
后代选择器：使用空格，如div p匹配所有属于div后代的p元素。
兄弟元素选择器 ：
1.使用+，如div + p 匹配下个满足条件的兄弟元素 。
2.使用~，如div ~ p 匹配满足条件的所有的兄弟元素。

属性选择器

属性选择器：使用[]，
1.基本使用方法：如 div[class=“father”]、匹配所有具有class属性并且值为father的div元素。
2.属性可以不写：div[class].
3.div[class~=“a”]：匹配标签里有这个属性、并且值用两个空格包裹起来，或者以这个值开头的元素。
4.div[class|=“a”]：匹配标签以这个值开头，中间可以用-连接的元素。
5.div[class^=“a”]:匹配以这个值开头的元素。
6.div[class$=“a”]:匹配以这个值结尾的元素。
7.div[class*=“a”]:匹配包含这个值得元素。

伪元素选择器

::palceholder:改变input里面placeholder提示文字的样式。
::selection：文字被选中的时候产生的样式
::befor:在元素内容的最前面添加新内容。
::after:在元素内容的最后面添加新内容。
::first-letter:应用于元素文本的第一个字（母）。

::first-line:伪元素的样式将应用于元素文本的第一行。

伪类选择器

a:link 匹配所有未被点击的链接。
a:visited 匹配所有已被点击的链接。
div:active 匹配鼠标已经其上按下、还没有释放的div元素。
div:hover 匹配鼠标指向时产生的样式。
先后顺序遵循爱恨法则：a:link、a:visited、a:hover、a:active
：first-child 匹配父元素的第一个子元素。
div:focus 匹配获得当前焦点的div元素。
div:lang(a) 匹配lang属性等于a的div元素。
:checked 表单控制被选中时的样式。
:root 根元素，相当于html标签。
：not(div)或 ：nots（） 排除括号内的元素。
div:target 被设为锚点的div元素，并且a链接点击时产生的样式。
:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素。
：first-of-type这个类型的第一个子元素。
：last-child最后一个子元素。
：last-of-type这个类型的最后一个子元素。
：nth-child正数第几个子元素。
：nth-child-type这个类型正数第几个孩子。
：nth-last-child倒数第几个孩子。
：nth-last-of-type这个类型倒数第几个子元素。
：only-child唯一的一个子元素。
:only-of-type:唯一一个这种类型的子元素。