【学习笔记】css选择器基础概念复习

选择器概念

选择器分类

基本选择器

  1. 类型(Type)选择器(_有些中文资料中称为“元素选择器”_)
  2. 类(Class)选择器
  3. ID 选择器
  4. 通用选择器(_有些中文资料中称为“通配符选择器”_)
  5. 属性选择器

类型选择器

类型选择器,又称为元素选择器

元素名{
    属性:属性值;
}

类选择器

.classname{
        属性:属性名;

}

【学习笔记】css选择器基础概念复习

ID选择器

#ID{
        属性:属性值;
}

【学习笔记】css选择器基础概念复习

通用选择器

*{
    属性:属性值;
}

属性选择器

选择器的优先级

优先级的计算方式如下:

  1. 优先级就是分配给指定的 CSS 声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。
  2. 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。
  3. 当同一个元素有多个声明的时候,优先级才会有意义。

选择器类型权重

  1. 通配符选择器的优先级为 0
  2. 类型(元素)选择器的优先级为 1
  3. 类选择器和属性选择器的优先级为 10
  4. ID 选择器的优先级为 100
  5. 内联样式的优先级为 1000

内联样式总会覆盖内嵌样式表和外联样式表的任何样式

!important 例外规则

如果使用 !important 规则的话,会覆盖掉所有其他选择器的声明样式。

注意:由于 !important 规则会破坏 CSS 选择器类型的权重规则,所以在开发中不建议使用。

上一篇

【学习笔记】html css 层级选择器基础知识复习