CSS选择器的分类及其优先级

css是网页开发过程中必不可少的一环，而CSS的选择器便是扮演着很重要的角色。CSS的选择器主要分为以下几类。

1. 元素选择器

元素选择器即为html中的标签名称，如div、p、ul等等，他们可以直接作为选择器使用，如：

``` div { color: red; } ```

把所有的div元素的字体颜色都改为红色。但是，这样使用元素选择器比较宽泛，只要是该元素，就会进行CSS的样式处理。

2. ID选择器

ID选择器以“#”符号开头，这是HTML中的元素ID，而CSS可以通过这一ID来选中某个具体的元素，并对其进行样式处理，例如：

``` #container { background-color: red; } ```

表示选中HTML中的id为“container”的元素，并将其背景颜色改为红色。

3. 类选择器

类选择器以“.”符号开头，CSS可以通过该类来选中某些具有相同类名的元素，例如：

``` .red { color: red; } ```

表示选中所有类名为“red”的元素，并将字体颜色改为红色。

4. 属性选择器

属性选择器可以匹配某个元素的属性，例如：

``` a[href="http://www.google.com"] { font-weight: bold; } ```

表示选中所有具有href属性为“http://www.google.com”的a标签，并将其文字加粗。

5. 伪类选择器

伪类选择器可以对某些特殊状态或者行为进行样式处理，例如：

``` a:hover { color: red; } ```

表示当鼠标在a标签上悬停时，将其文字颜色改为红色。

以上便是CSS选择器的主要分类，这些选择器可以配合使用，使得CSS的样式选择更加精准、灵活。

在CSS选择器的应用中，也需要了解到不同选择器之间的优先级问题。

选择器的优先级，通常会遵循以下几种规则。

1. 重要性优先

重要性优先即为 !important 来标记某个属性或值，CSS中该标记优先级是最高的，无论该样式写在何处，都会被该优先级最高的样式所覆盖，但是不推荐滥用该标记。

2. 内联样式优先

内联样式指的是将样式样式写在HTML元素上，这种优先级最高，但是也不建议滥用内联样式，因为内嵌式、外链式都可以替代内联式，降低HTML代码的耦合性。

3. ID选择器优先级

ID选择器优先级较高，但是不建议滥用ID选择器，因为ID包含页面语义，而重复使用时会导致不同页面之间的样式混淆。

4. 类、伪类、属性选择器优先级

这些选择器的优先级是相当的，在CSS中，他们都是通过“.”、“#”、“[ ]”来定义的，它们的优先级是相等的，但是当它们产生冲突时，谁在后面编写，就使用谁的样式。

5. 元素选择器优先级

元素选择器优先级是最低的，当与其它选择器冲突时，先选择权。

总结：拥有更高优先级的样式会覆盖掉低优先级的样式。在CSS中，选择器越特殊，优先级越高，因此在编写样式时，建议按照项目需求及语义化的原则进行选择器的合理使用，不滥用ID选择器和 !important 标记。