CSS

最近在学习CSS，赶紧先记录一下。

选择器selector，选中需要渲染的对象：

元素选择器，选中HTML元素：h1 {color:gray;}

选择器分组，使用逗号连接两个规则(使用同一个声明块)：h1,h2,p{color:gray;}

通配选择器，匹配任何元素：*{color:red;}

类选择器，选择含有class属性为classname的元素：*.classname{font-weight:bold;}等价于.classname{font-weight:bold;}。特定元素的类p.classname{font-weight:bold;}。

多类选择器，两个类连在一齐，选择同时包含着两个类的元素(不限顺序)：.classname1.classname2{background:silver;}; 

ID选择器，#号加ID名称：*#lead-para{font-weight:bold;}等价于#lead-para{font-weight:bold;}。

属性选择器，用[ ]号括住要选择元素属性。h1[class]{color:silver;}。*[title]选中所有包含title属性的元素。a[href][title]选择同时有href和title属性的HTML元素。

具体属性值选择，用[ ]号括住元素属性和值(必须完全匹配)：a[href="about_me.html"]。*[id="lead-para"]也可以选中ID为lead-para的元素，不同的是这样选择的元素渲染时的特殊性要低一些。

特定属性选择器：*[lang|="en"]，选择lang属性等于en或en-开头的所有元素。

后代选择器，空格连接，选中某元素内嵌的后代所有元素：h1 em{color:gray;}，选择作为h1后代的任何em元素。

子元素选择器，子结合符">"连接，选中所有父元素的子元素：h1 > em{color:gray;}

兄弟选择器，兄弟结合符"+"连接，选中某元素的所有兄弟元素(不包含该元素)：li+li{font-weight:bold;}，选中li的兄弟li元素(除了第一个li元素)渲染。

伪类和伪元素选择器，冒号:加伪类的关键字：a:visited，选择已经访问过的a元素。LVHA(LoVe-HA!)

伪类：link，未访问地址。visited，已经访问过的。focus，拥有焦点框时。hover，鼠标悬停时。active，鼠标按下时激活。

伪元素：first-child，选择第一个子元素。lang，根据语言选，类似于特殊属性选择器"|="。first-letter，选择首字母。first-line，选择第一行。before，选中元素开头前。after，选中元素开头后。

特殊性，当CSS渲染HTML元素时，发生冲突时，特殊性高的声明会胜出：

重要性"!important"，加在一个声明后，超过所有特殊性。

内联样式，特殊性：1000。

ID选择器，特殊性：0100。

类属性值，属性选择或伪类，特殊性：0010。

元素和伪元素，特殊性：0001。

结合符和通配选择器，特殊性：0000。

继承，样式会应用到后代元素，特殊性：无。

层叠，在特殊性都一致的情况下，文档内和后定义的声明生效。

在定义CSS的伪类时，伪类的顺序很重要：link-visited-focus-hover-active。如果顺序颠倒过来，会导致动态伪类失效(IE,chrome,firefox,opera,safari)。例如：

a:focus{color:yellow;}
a:hover{color:green;}
a:active{color:red;}

a:visited{color:purple;text-decoration:line-through;font-style:italic;}
a:link{color:silver;font-style:italic;}

动态伪类可以应用到任何元素，例如突出显示准备接受输入的表单元素：

input:focus{background:silver;font-weight:bold;}

选择第一个子元素：

p:first-child{font-weight:bold;}

选择所有第一个子元素是p的元素。

其它伪类：

lang属性含有fr或fr-的元素：*:lang(fr)；

首字母：p:first-letter；

第一行：p:first-line；

设置之前和之后元素样式：div:before{content:"}}";color:silver;}  div:after{content:" The End.";}