【CSS】构建基础Ⅰ

根据MDN网站学习记录笔记

理解层叠

层叠如何在定义不止一个元素的时候应用css规则。注意一个规则覆盖另一个规则时只覆盖相同属性。
考虑以下三因素（存在优先级）：

1. 重要程度
2. 优先级
3. 资源顺序

资源顺序

有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。理解为后面的覆盖前面的。

优先级

有些规则在最后出现，但是却应用了前面的规则。这是因为前面的有更高的优先级 — 它范围更小，因此浏览器就把它选择为元素的样式。

不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

1. 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
2. 百位： 选择器中包含ID选择器则该位得一分。
3. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
4. 个位：选择器中包含元素、伪元素选择器则该位得一分。

通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。

!important用于修改特定属性的值， 能够覆盖普通规则的层叠。
但是，强烈建议除了非常情况不要使用它。 !important 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。

CSS选择器

CSS选择器：元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式

选择器列表

将多个选择器通过 , 组合起来变成选择器列表。

h1,
.special {
   
  color: blue;
} 

Noitce：当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。

选择器的种类

以下是几种常用的选择器：

元素选择器

h1 {
    }

类选择器

.box {
    }

id选择器

#unique {
    }

标签属性选择器

• 根据一个元素上某标签属性的存在。
  eg:选择拥有titie属性的<a>标签

a[title] {
    }

• 根据一个有特定值的标签属性是否存在来选择

a[href="https://example.com"] {
    }

伪类与伪元素

• 伪类用于向某些选择器添加特殊的效果。
  例如:hover伪类会在鼠标指针悬浮到一个元素上的时候