CSS怎么解决样式冲突

本文为《CSS 设计指南(第 3 版)》阅读笔记

  • 继承
  • 层叠
  • 特指

继承

  • CSS 中有很多属性是可以继承的,其中相当一部分都跟文本有关,比如颜色、字体、字号。
  • 也有很多 CSS 属性不能继承,因为继承这些属性没有意义。这些不能继承的属性主要涉及元素盒子的定位和显示方式,比如边框、外边距、内边距

例子

举个例子吧,假设我们想创建一个边栏,在其中放一组链接。为此,我们用 nav 元素嵌套该组链接,并给 nav 应用了一种字号和一个边框效果,比如 2 像素宽的红色边框。不难想象,nav 中的所有链接都继承它的字号很正常,可要是也继承它的边框就不合适了。当然,这些链接不会继承边框效果,因为border 属性不能继承

可能存在的坑

由于字体和文本样式是可以继承的,所以在使用相对字体单位(如百分比和 em)时要格外小心。如果某个标签的字体大小被设置为 80%,而它的一个后代的字体大小也被设置为 80%,那么该后代中文本最终的字体大小将是64%(80%的 80%)。这有时候可能并不是你想要的结果。第 4 章我们会详细介绍绝对和相对大小的利弊。

层叠

浏览器有一个默认的样式表,因为你还没有写一行 CSS 呢,每个标签已经带了一定的样式。h1 是不是粗体,字号还挺大?em 是不是斜体?列表呢,是不是缩进而且还带项目符号或编号?

  • 浏览器样式表
  • 用户样式表,没错,用户也可以提供样式表,尽管这样的用户不多见。这个选择对于视障用户很有用,他们可以通过用户样式表,强制浏览器加载的所有网站都以更大的字号,更容易分辨的颜色显示内容。
  • 作者样式表:
    • 链接样式(按照它们链接到页面的先后顺序)
    • 嵌入样式
    • 行内样式

样式层叠顺序:

图片.png | center | 406x246