|
这篇文章主要介绍了CSS属性简写和选择器的优先级问题,是CSS入门学习中的基础知识,需要的朋友可以参考下
几个常用 CSS 属性的简短写法
精简 CSS 代码有很多种方法，但其中最常用的方法可能就是使用属性的简短形式。
具有简短写法的 CSS 属性很多，但是常用的属性无外乎字体、列表、背景、边框、透明等几种，所以在此对这几种属性的简短写法做个归纳，备忘。
font 属性
font 属性涉及到字体、字号、行高等好几个属性，使用简短写法的时候可以节省好多代码量。虽然并非所有属性都要定义，但是一般来说 font-size 和 font-family 是必不可少的，以下是 font 的几个属性与其对应的默认值：
CSS Code复制内容到剪贴板
- /* font 各属性与默认值 */
- font-variant: normal;
- line-height: normal;
- font-family: varies;
- font-weight: normal;
- font-style: normal;
- font-size: medium;
以上 6 个属性可以合并成一行，根据 W3C 规范，各属性前后排列顺序依次为：
CSS Code复制内容到剪贴板
- /* 字体各属性前后顺序 */
- font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
再看以下几个示例：
CSS Code复制内容到剪贴板
- font: 14px Georgia, serif;
- font: 14px/1.4 Georgia, serif;
- font: italic lighter 14px/1.4 Georgia, serif;
- font: italic small-caps lighter 14px/1.4 Georgia, serif;
可以看到，一行代码就可以代替一段代码，而且看起来还更优雅一些，就是单独查找某个属性的时候有点不太方便，看着眼花。
list 属性
list 有三个属性，这三个属性分别定义：type、image 和 position，它们的属性名和默认值分别如下：
CSS Code复制内容到剪贴板
- list-style-type: disc;
- list-style-image: none;
- list-style-position: outside;
list 只有三个属性，并不复杂，但是我们仍然可以将这三个属性合并为在一行中，根据 W3C 规范，写法如下：
CSS Code复制内容到剪贴板
- /* list 属性简短写法 */
- list-style: [list-style-type] [list-style-position] [list-style-image];
-
- /* 示例 */
- list-style: none;
- list-style: disc;
- list-style: disc outside;
- list-style: disc outside url(bg.png);
一如既往的简单，基本上就是简写了 list 属性的名称，然后按顺序排列一下属性的值即可。
background 属性
很多样式表中都会多次定义 background 属性，每次都要重复其 5 个属性的话，那代码量可会成倍的增加呢。下面是其 5 个属性名及其默认值：
CSS Code复制内容到剪贴板
- /* background 的各属性及其默认值 */
- background-attachment: scroll;
- background-color: transparent;
- background-position: top left;
- background-repeat: repeat;
- background-image: none;
根据 W3C 规范，将其 5 个属性合并起来的写法如下：
CSS Code复制内容到剪贴板
- /* background 属性简短写法 */
- background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
-
- /* 示例 */
- background: #777;
- background: url(images/bg.png) 0 0;
- background: #777 url(images/bg.png) repeat-x 0 0;
- background: #777 url(images/bg.png) repeat-x fixed 0 0;
对于 background 简短写法而言，不同的标签的使用方法和效果都有一些细微差别，欲知详情者，请至官方文档查看。
border 属性
border 属性更为简单，它 3 个属性以及默认值如下：
CSS Code复制内容到剪贴板
- /* border 各属性及其默认值 */
- border-width: none;
- border-style: none;
- border-color: none;
根据 W3C 规范，其简短写法如下：
CSS Code复制内容到剪贴板
- /* border 属性简短写法 */
- border: [border-width] [border-style] [border-color];
-
- /* 示例 */
- border: 1px solid #111;
- border: 2px dotted #222;
- border: 3px dashed #333;
当然也可以为 4 个边框定义不同的样式：
CSS Code复制内容到剪贴板
- border-bottom: 1px solid #777;
- border-right: 2px solid #111;
- border-left: 2px solid #111;
- border-top: 1px solid #777;
CSS 选择器的优先级问题
CSS 意为层叠样式表。所谓层叠，就是说，可以用多个 CSS 声明来作用于同一元素，例如用一段 CSS 来定义文字的颜色，用另外一段 CSS 来定义文字的大小，最终达到样式叠加的效果。
这种特性一定程度上使 CSS 可以更为方便的定义样式，但同时也带来了一定的复杂性。例如，当多个样式作用于同一个元素，而且还是作用于同一个属性，元素最终会以何种方式来呈现样式呢？
参考下面这个例子：
CSS Code复制内容到剪贴板
- p {
- color: black;
- background-color: white;
- }
- div.warning p {
- color: red;
- }
- div#caution p {
- color: yellow;
- }
- body#home div p {
- color: white;
- }
此样式表中有 4 组选择器，且最终都指向 p 元素，并且每组样式中都有 color 属性。这样一来，可能的情况就是会有多个颜色属性，被施加于同一个 p 元素。问题来了，浏览器最终会以什么样的方式来渲染 p 的颜色呢？后定义的颜色会覆盖掉先定义的颜色吗？
这里就涉及到一个 CSS 选择器优先级的问题，如果有多个选择器作用于某元素的同一个属性，那么浏览器会去计算其对应选择器的优先级，并最终将优先级最高的那个选择器的样式作用于元素。
如何计算优先级呢？
优先级的计算通常遵循如下规则：
如果某元素被设置了 style 属性，也就是说被设置了行内样式，那么此行内样式将拥有最高的优先级，任何其它外部样式都不能将其覆盖。如果没有被设置行内样式，那么参照下面的第 2 条规则。
数一下选择器中 ID 选择器的个数，个数最多的，优先级就最高。如果 ID 选择器个数相同，或者压根儿就没有 ID 选择器，那么参照下面的第 3 条规则。
数一下类选择器（如 .test）的个数，属性选择器（如 [type="submit"]）的个数，还有伪类选择器（如 :hover）的个数，然后将个数加起来，总数最多的，这组选择器的优先级就最高。如果总是一样多，或者都为 0，那么参照下面的第 4 条规则。
数一下标签选择器（如 p）的个数，另外还有伪元素选择器（如 :first-letter）的个数，加起来，总数最多的，优先级就最高。
如果经过上面的计算，优先级还是一样高，那么遵循后出现的样式覆盖先出现的样式之规则。
现在回过头来看先前的例子，那四组选择器的优先级分别为 0001、0012、0102、0103，之所以把优先级数字化，是因为这样更方便比较。按照自然数法则（事实上它们并非自然数）来比较，1 < 12 < 102 < 103，这样一来，它们的优先级孰高孰低，就一目了然了。
| 
发表于 2015-8-15 16:59:43
