今天小编跟大家讲解下有关CSS属性简写和选择器的优先级问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS属性简写和选择器的优先级问题 的相关资料，希望小伙伴们看了有所帮助。
几个常用 CSS 属性的简短写法
精简 CSS 代码有很多种方法 但其中最常用的方法可能就是使用属性的简短形式。
具有简短写法的 CSS 属性很多 但是常用的属性无外乎字体、列表、背景、边框、透明等几种 所以在此对这几种属性的简短写法做个归纳 备忘。font 属性
font 属性涉及到字体、字号、行高等好几个属性 使用简短写法的时候可以节省好多代码量。虽然并非所有属性都要定义 但是一般来说 font-size 和 font-family 是必不可少的 以下是 font 的几个属性与其对应的默认值：
CSS Code复制内容到剪贴板 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:14pxGeorgia,serif; font:14px/1.4Georgia,serif; font:italiclighter14px/1.4Georgia,serif; font:italicsmall-capslighter14px/1.4Georgia,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-style:[list-style-type][list-style-position][list-style-image]; list-style:none; list-style:disc; list-style:discoutside; list-style:discoutsideurl(bg.png);一如既往的简单 基本上就是简写了 list 属性的名称 然后按顺序排列一下属性的值即可。background 属性
很多样式表中都会多次定义 background 属性 每次都要重复其 5 个属性的话 那代码量可会成倍的增加呢。下面是其 5 个属性名及其默认值：
CSS Code复制内容到剪贴板 background-attachment:scroll; background-color:transparent; background-position:topleft; background-repeat:repeat; background-image:none;根据 W3C 规范 将其 5 个属性合并起来的写法如下：
CSS Code复制内容到剪贴板 background:[background-color][background-image][background-repeat][background-attachment][background-position]; background:#777; background:url(images/bg.png)00; background:#777url(images/bg.png)repeat-x00; background:#777url(images/bg.png)repeat-xfixed00;对于 background 简短写法而言 不同的标签的使用方法和效果都有一些细微差别 欲知详情者 请至官方文档查看。border 属性
border 属性更为简单 它 3 个属性以及默认值如下：
CSS Code复制内容到剪贴板 border-width:none; border-style:none; border-color:none;根据 W3C 规范 其简短写法如下：
CSS Code复制内容到剪贴板 border:[border-width][border-style][border-color]; border:1pxsolid#111; border:2pxdotted#222; border:3pxdashed#333;当然也可以为 4 个边框定义不同的样式：
CSS Code复制内容到剪贴板 border-bottom:1pxsolid#777; border-right:2pxsolid#111; border-left:2pxsolid#111; border-top:1pxsolid#777;CSS 选择器的优先级问题
CSS 意为层叠样式表。所谓层叠 就是说 可以用多个 CSS 声明来作用于同一元素 例如用一段 CSS 来定义文字的颜色 用另外一段 CSS 来定义文字的大小 最终达到样式叠加的效果。
这种特性一定程度上使 CSS 可以更为方便的定义样式 但同时也带来了一定的复杂性。例如 当多个样式作用于同一个元素 而且还是作用于同一个属性 元素最终会以何种方式来呈现样式呢
参考下面这个例子：
CSS Code复制内容到剪贴板 p{ color:black; background-color:white; } div.warningp{ color:red; } div#cautionp{ color:yellow; } body#homedivp{ 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 这样一来 它们的优先级孰高孰低 就一目了然了。
来源：爱蒂网
