选择器的优先级
在一样的标签下，根据代码的上下解析，谁在最后谁显示。
<style>h2 {color:red;}h2 {color:yellow;}</style><body><h2>百度</h2></body>最后显示百度字体颜色为黄色
在组合选择器中，ID>class>标签，浏览器会根据他们的数量来比较大小，可以把它比成数字[id的数量.class的数量.标签的数量]谁大谁显示。不管同级有多少个，都比不过比它大的一级
<style>body h2 {color:red;}h2 {color:yellow;}</style><body><h2 class="on" id="foo">百度</h2></body>解析：最终h2会显示红色，因为第一个有两个标签，所以不会按照先后顺序显示
<style>body h2 {color:red;}h2.on {color:yellow;}</style><body><h2 class="on" id="foo">百度</h2></body>
解析：最终h2会显示为黄色，因为第二个有class选择器[0.1.0]，比第一个[0.0.2]大
<style>body h2 {color:red;}:root h2 {color:yellow;}</style><body><h2 class="on" id="foo">百度</h2></body>
解析：最终h2会显示为黄色，因为第二个的伪类选择器也是类相当于class[0.1.0]，比第一个[0.0.2]大
<style>#foo body h2 {color:red;}h2.on {color:yellow;}</style><body><h2 class="on" id="foo">百度</h2></body>
解析：最终h2是红色，因为第一个有id选择器[1.0.2]，比第二个[0.1.1]大
实例演示字体与字体图标
<style>.font {font: italic lighter 36px sans-serif;}</style><script src="font/iconfont.js"></script><style>.icon {width: 10em;height: 10em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style><body><h2 class="font">PHP中文网真是个好地方</h2><svg class="icon" aria-hidden="true"><use xlink:href="#icon-1"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-2"></use></svg></body>
盒模型属性简写
边框简写，直接用border来设置四周的边框，里面的值分别是尺寸、颜色和样式、缺一不可。
<style>.box{border: 10px red solid;}</style>内边距简写
<style>四个值，里面的值分别是上、右、下、左.box{padding:5px 10px 15px 20px;}三个值，分别是上、左右、下.box{padding:5px 15px 20px;}两个值，分别是上下、左右、下.box{padding:15px 20px;}</style>外边距简写
<style>四个值，里面的值分别是上、右、下、左.box{margin:5px 10px 15px 20px;}三个值，分别是上、左右、下.box{margin:5px 15px 20px;}两个值，分别是上下、左右、下.box{margin:15px 20px;}</style>