前端进阶-个人笔记-CSS基础知识

CSS属性的继承：
元素的一些CSS属性是有继承关系的，有继承关系的属性被称为可继承属性。color属性就是一个可继承属性。还记得前面的课程里我们说过HTML文档结构是树状结构，元素之间有嵌套关系。可继承属性是指如果我们在外层元素上设置了这个样式属性，内层没有设置该属性的元素都会自动继承该属性。比如我们给body设置了color为白色，它内层的h1、h2、p、em等标签我们没有设置color，但是它们自动继承了body设置的color，于是也成为了白色。

与之不同的是，不可继承属性是指设置在外层元素的属性不会影响没有设置该属性的内层元素的显示效果。比如backgroud-color就是是一个不可继承的属性，我们给body设置了background-color为黑色，并不会将它内层元素的background-color也设置为黑色。这里我们看到整个页面都成为黑色，是因为body刚好占据整个页面，而其他没有设置background-color的元素默认的背景是透明色，所以看起来好像是它们一起变黑了。

CSS伪类选择器：
表示选择元素的某个特定状态

状态的选择器——伪类

<a>标签表示链接，在网页中，一个链接中的文字有四种状态：

• 第一种状态是默认（link）状态，对应用户访问网页时，还未点击过该链接文字。
• 第二种状态是悬停（hover）状态，对应用户使用鼠标悬停在该链接的文字上时。
• 第三种状态是激活（active）状态，对应用户正在点击链接文字的一瞬间（比如鼠标按下或触屏中）。
• 第四种状态是已访问过（visited）状态，对应用户已访问过该链接文字。

浏览器默认将link状态文字颜色默认设为蓝色，将hover状态文字颜色默认设为与link状态颜色相同，将active状态文字颜色默认设为红色，将visited状态文字颜色默认设为紫色。
我们可以通过CSS修改链接的这四种状态的默认颜色，如下代码所示：

a:link {
  color: white;
}
a:hover {
  color: green;
}
a:active {
  color: orange;
}
a:visited {
  color: yellow;
}

这里我们看到与前面不同的一种选择器，它以冒号:开头，表示元素的某种状态。这样的选择器被称为伪类选择器（pseudo-class）。

好了，我们来总结一下这节课里出现的三种选择器，我们先回顾一下刚才我们写过的所有的CSS规则：

body {
  background-color: black;
  color: white;
}
p.first-para {
  color: red;
}
a:link {
  color: white;
}
a:hover {
  color: green;
}
a:active {
  color: orange;
}
a:visited {
  color: yellow;
}

上面的代码里一共有6个CSS规则，每个规则都有选择器，按照类型划分一共有三类选择器。

第一类选择器是body、p、a这样的选择器，它们叫做元素选择器，表示选择某种类型（即某种标签）的元素。body选择网页里所有的body元素（一个网页只有一个body元素），p选择网页里所有的p元素，a选择网页里所有的a元素。

第二类选择器是.first-para这样的选择器，它叫做类选择器，表示选择某个拥有特定的class属性的元素。

第三类选择器是:link、:active这样的选择器，它们叫做伪类，表示选择元素的某个特定状态。

注意CSS的选择器是可以组合的，比如上面代码的第二条规则里，p.first-para——组合了一个元素选择器和一个类选择器。该选择器表示选中页面上所有带有class属性且class属性值为first-para的P元素。同样，在规则3-6里，我们组合了元素选择器a和伪类。我们还可以组合更多的选择器以匹配更复杂的规则，例如：a.myclass:visited表示选择页面上所有class="myclass"且状态为visited的a元素。

元素选择器、类选择器和伪类是三种常用的CSS选择器，此外，CSS还有许多其它类型的选择器，而组合选择器的规则也可以更加复杂。

“层叠”与优先级

CSS规则根据选择器匹配范围来命中元素，页面上的一个元素很可能被多个CSS规则所命中。此时，如果这些命中的规则涉及的属性不重复，那么它们会被层层叠加设置到该元素上。如果这些命中的规则涉及的属性重复，那么其中一条优先级最高的规则所涉及的属性将被设置到该元素上。

CSS的优先级是由属性的重要性、选择器的专用性和规则书写的次序依次决定，在这里我们不打算全面介绍，只先大致了解：

1. 如果没有特殊声明（特殊声明在后续课程中介绍）我们设置的普通CSS属性的重要性一般来说是相同的。
2. 选择器的专用性中，类选择器和伪类的专用性相同，它们高于元素选择器的专用性。在CSS规则的组合选择器中，选择器的专用性越高，优先级越高；当选择器的专用性一样时，选择器数量越多，优先级越高。

因此上图中的例子，选择器优先级排序从高到低为：

1. a.friends:link（1个伪类+1个类选择器+1个元素选择器）
2. a.friends (0个伪类+1个类选择器+1个元素选择器)
3. a (0个伪类+0个类选择器+1个元素选择器)

如果选择器的重要性和专用性相同，代码中后出现的规则优先级更高，因此如果以下两条规则应用于<a class="friends">Link</a>：

a:link {
  color: red;
}
a.friends {
  color: green;
}

由于a:link和a.friends前者由一个元素选择器和一个伪类组成，后者由一个元素选择器和一个类选择器组成，它们的专用性比较结果是相同的，但由于a.friends在代码中出现的位置晚于a:link，因此最终规则应用后，<a class="friends">Link</a>的文字颜色是绿色。