CSS选择器和CSS权重

一、CSS作用

CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

它主要用来修饰网页。对网页中元素位置的排版进行像素级精确控制，同时支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
使用HTML和CSS，就可以写出静态的网页了。

二、CSS选择器

要想编辑一个网页，首先需要选中被编辑的对象，这就要使用CSS选择器。

1.类别选择器

类选择器根据类名来选择，前面以”.”来标志。如：.wrap
这的类名在HTML中class属性定义。

2.标签选择器

一个HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签
采用相应的CSS样式。如：div

3.ID选择器

ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，这样就可以选定某个特定的元素进行编辑。如：#name

4.后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将父元素的选择放在前面，对需要选择的后代元素的选择放在后面，中间加一个空格分开（可逐级选择，也可跳级选择）。结合之前的类选择、标签选择、ID选择，一层一层的选中特定的元素。
注意：后代选择器选择的不一定是子元素，只要是父元素下满足条件的元素都会被选择上。

5.子选择器

子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。通过“>”进行选择。必须一层一层选择到需要的地方。

6.伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。

伪类选择器	效果
hover	匹配鼠标悬停其上的元素
visited	匹配所有已被点击的链接
link	匹配所有未被点击的链接
active	匹配鼠标已经在其上按下但是还没有释放的元素

当触发伪类元素时，伪类元素只能修改自已，或自已的子级元素。不能修改子级的父级，或兄弟元素。

7.通用选择器

通用选择器用*来表示。选择HTML中所有的部分。
一般用于初始化设定。

8.群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

三、CSS权重

一个元素可以通过不同的方式被选择。但这些选择出现冲突该如何处理？
通过不同的方法选择一个元素会有不同的权重，如果权重大，就依照权重大的。如果权重一样大，就选择定义在后面的元素定义。

类型	权重
! important	无穷
行间样式	1000
id	100
class/属性选择器/伪类	10
标签选择器	1
通配符	0

使用后代选择器时，每一级不同的表述方式，直接进行相加，最后进行权重的比较。
ps：CSS的选择器进制是256进制。