非典型CSS指南

记录一些我认为比较有意思的CSS使用方法

属性选择器

众所周知，CSS说白了就是对各种选择器的排列组合。子代（tr > td，只选择tr的直接子元素td）
， 后代（tr td选择tr下的所有td元素）， 相邻元素(tr + tbody, 紧接着tr元素的tbody元素)， 以及地球人都会用的
元素、类、伪类、ID选择器，略过不提。

跟上边这些被各种w3cSchool讲烂了的选择器相比，知道属性选择器的人就少多了。
属性选择器，顾名思义，可以根据指定属性按某些规则对页面元素赋予对应样式。这在页面元素的属性很有规律的时很有用处，示例如下：

• a[title]:选择所有具有title属性的a元素
• [type='password']，选择所有type是password(且仅是password)的标签。

除此之外

• ^=选择属性值以指定内容开始的标签
• $=选择属性值以指定内容结束的标签
• *=选择属性值含有指定内容的标签
• ~=选择属性值包含指定内容的标签

特殊性

有必要说说CSS里的特殊性。

不知道大家平常有没有碰到过这样一种情况，就是给一个类设上了样式，而且是在最后才声明出来，但这个样式却总是被其他样式给覆盖掉，非得加上!important才行，查w3cSchool也查不出原因，非常诡异。

但说来也简单，对于CSS中的每条规则，浏览器都会为此计算出一组特殊性值，在具体应用样式时，只有特殊性最高的样式才会被应用到元素身上。
而之所以我们前面设定的样式不生效，说白了就是因为外部CSS文件中的特殊性大于我们设定的特殊性而已。

计算规则如下：

• 特殊性共有四位，记为0,0,0,0，
• 对于选择器中给定的各个ID属性值，加0,1,0,0
• 对于选择器中给定的各个类属性值、属性选择器或者伪类选择器(:link、:active)，加0,0,1,0
• 对于选择其中给定的各个元素和伪元素(:after、:before),加0,0,0,1
• 对于结合符（+）和通配符（*）选择器，特殊性加0,0,0,0
• 继承得来的属性，没有任何特殊性（需要说明的是，没有特殊性的特殊性小于（0,0,0,0），也就是说，如果你在一开始声明*{color:red;}（特殊性（0，0，0，0））的话，那么所有元素都会变成红色）
• 对于内联样式，特殊性加(1,0,0,0)
• 对于!important重要声明，它的特殊性是
• 对不起，!important不计算特殊性，浏览器在计算的时候会把所有样式分成重要和非重要两组，分别计算特殊性

比如说下面这样（注释内容为该选择器的特殊性）

h1 {color : red;}                                              /* (0,0,0,1) */
p em {color : purple;}                                         /* (0,0,0,2) */
.grape {color : purple;}                                       /* (0,0,1,0) */
*.bright {color: yellow;}                                      /* (0,0,1,0) */                      
p.bright em.dark {color : black;}                              /* (0,0,2,2) */          
#id216 {color : blue;}                                         /* (0,1,0,0) */
div#sidebar *[href] {color : red;}                             /* (0,1,1,1) */          
html > body table tr[id*="totals"] td ul > li {color : black;} /* (0,0,1,7) */

然后在最终应用规则时，按以下方式进行：

1. 找出所有相关规则，这些规则都包含与一个给定元素相匹配的选择器、
2. 按显式权重对应用到该元素的所有生命排序。标志!important的规则权重要高于没有!important标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源：创作人员，读者和浏览器（专业说法叫用户代理）。
   正常情况下，创作人员的样式要胜过读者的样式，有!important标志的读者样式要强于所有其他样式，这包括有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。
3. 按特殊性对应用到给定元素的所有声明排序。有较高特殊性的声明权重要大于有较低特殊性的声明
4. 按出现顺序对应用到给定元素的所有生命排序。一个声明在样式表或文档中越后出现，它的权重就越大。如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。

Over

零散的CSS小Tip

• cursor属性可以更改鼠标在元素上的样式，{cursor:default;}是正常的箭头，{cursor:pointer;}是小手，这是CSS中的一组系统级样式，可以根据属性值的不同调用系统中对应鼠标样式进行显示，这条在用CSS标记一个链接已经被访问过时可以用上
• 利用:before和:after这两个伪元素，可以在指定元素的前后生成并不存在的元素。
• 比如可以用a:before{content:'链接:'}，在所有链接前都加上『链接：』提示语
• 更进一步，利用:before和:after的content属性，我们还可以展示元素属性中的内容
• 例如a[href]:after{content:attr(href)}，显示所有a元素的链接；
• *[class]:after{content:attr(class)}，显示所有元素的class
• etc……
• 行内元素的居中对齐：{text-align:center}
• 垂直对齐：{vertical-align:middle}
• 块元素居中：{margin:auto}
• 使用display可以更改一个元素的显示，比如可以用{display:table},{display:table-row},{display:cell},能硬生生的用div画出一个表格
• 打印网页时可以用page-break-before&page-break-after控制分页，兼容所有的浏览器，用过都说好