CSS 有许多选择器，例如：id、class，当有一个元素重复用到选择器定义的样式时，优先级的概念就很重要，优先级高的选择器样式会优先出现，而这些选择器的优先级也是被定义好的，以下文章会分享到大部分选择器的优先级排列。 优先级分数 了解每个选择器的顺序优先级之前，要了解分数 (specificity scoring) 的概念，每个由选择器组成的样式自己本身会有一个加总分数，分数最高的会胜出。但是，当我们在开发 CSS 时，如果同样能写出想要的样式，要尽可能选择分数较低的，而不是分数较高的；因为如果未来有一个更重要的样式，可以比较容易添加上去。假如某个样式在最开始就被写成最重要，这时要加上其他样式就会变得困难。 选择器分数 选择器优先级整理 除了上数的分数计算规则以外，另外补充几点样式优先级的特性 实际例子 透过以下例子来了解选择器加总后的分数是如何计算的
本文图片较多，如有不清楚的地方，可以点击原文链接查看高清大图。另，如有翻译不周之处，请指摘。 原文： The Complete CSS Flex Box Tutorial 译文： Flex 盒子与CSS 网格 （Grid）很相似，都十分复杂，这是因为它不止包含一种元素类型，而是两种：container 和 items。 CSS 视觉字典（译者注：原作者推荐的一本讲述CSS属性的付费书籍） Contains visual diagrams for every single CSS property in common use.medium.commedium.com/@js_tut/css-visual-dictionary-e53329daf93e 如果想更好地理解Flex的工作原理，可以在此页面上尝试flex 布局编辑器。 当我刚开始学习Flex的时候，我想搞清楚它能做的所有事情，但却始终找不到一本能展示Flex所有属性事例的全面性教材。因此，我以鸟瞰 的方式，用Flex的方式画了以下图表。 这就是Flex能做的所有事情。但是……还是让我们以评论的方式来逐一重温以上图表吧。在本课程结束时，相信你一定会对Flex所能做的事情了如指掌。 Flex Flex是在父容器中自动伸展多行和多列内容的规则集。 display: flex 与其他CSS属性不同，在Flex布局中，存在一个主container，items嵌入其中。有些CSS Flex属性只作用于父container。有些则只作用于items。 你可以把flex元素看作是带有display:flex属性的父container，而放置在这个container中的元素则叫做items。每个container均有 flex-start 和 flex-end点，如图所示。 主轴和交叉轴 尽管item都是以线性方式排列的，Flex还是要求你注意行和列。因此，Flex有两条坐标轴。水平轴指的是主轴，垂直轴指的是交叉轴。 在主轴上水平延伸的内容具有宽度和间隔，为了控制它们的显示行为，你将会使用到justify相关属性。为了控制item的垂直展示行为，你将会使用align相关属性。 如果你有3列6个item，那么在展示时，Flex将会自动创建第二行来容纳剩余的item。 如果你有多于6个item的展示列表，Flex则会创建更多的行。 行和列如何在父元素中分布是由：flex-direction 、flex-wrap 以及其他几种 Flex 属性决定的，这些属性都将在本教程的余下内容中有所涉及。 Direction（方向） 可以通过倒置的方式来设置 item 流的方向。 Wrap Read more…