关于CSS选择器的笔记（一）

CSS选择器
1、按上下文选择元素
祖先是包含目标元素（后代）的任何元素，不管它们之间隔了多少代。
父元素是直接包含另一个元素的元素，它们之间只隔一代，被包含的元素称为子元素。
同胞元素是拥有同一个父元素的任何类型的子元素。相邻同胞元素是直接相互毗邻的元素，即它们之间没有其他的同胞元素。

article.architect p{}  或 article p{}
在实践中，在类名（尤其是ID名）之前添加元素名，通常会让特殊性比实际需要的要高。

A)按祖先元素选择要格式化的元素（后代选择器/后代结合符）。格式：祖先选择器+空格+格式化的元素
B)按父元素选择要格式化的元素（直接后代/子选择器）。格式：父元素+>+子元素
C)按相邻同胞元素选择要格式化的元素（相邻同胞结合符）。格式：统一父元素+“+”+元素
普通同胞结合符可以选择那些并非直接出现在另一同胞元素后面的同胞元素。格式：统一父元素+“~”+元素

2、选择第一个或最后一个元素。

使用伪类:first-child 和:last-child规定样式。例：li:first-child{}等

3、选择元素的第一个字母或者第一行。:first-letter 和:first-line。例：.project p:first-letter{}、p:first-line{}

只有某些特定的css属性可以应用于:first-letter伪元素，包括font、color、background、text-decoration、vertical-align（只要:first-letter不是浮动）、text-transform、line-height、margin、padding、border、float、clear。

伪元素是html中并不存在的元素。伪元素有四个，在css3中用双冒号，以便与伪类区别。::first-line、::first-letter、::before和::after。

4、按状态选择链接元素。格式：a+“:”+link/visited/focus/hover/active(LVFHA或LVHFA顺序)。

触屏设备的浏览器没有桌面浏览器所具有的“鼠标悬停hover”状态。

5、按属性选择元素。格式：元素+[属性名或属性值，属性名=属性值]+{}
可以给具有属性名或属性值的元素进行格式化。如果在选择器中忽略属性值，就可以为具有给定属性的一类元素应用样式，而不管具体的属性值是什么。

6、指定元素组（组合选择器）。

可以组合使用任意类型的选择器，从最简单的到最复杂的都可以。不同的选择器不一定非得单独成行。例：h2,.project p:first-letter。

7、组合使用选择器。元素间用空格隔开。
em{}  .project  em{}  article  .project  em{} ==>>样式特殊性（权重）由低向高排列的。
只在必要情况下组合使用选择器，并且，最好将特殊性控制在刚好需要的程度。总之，从最简单的开始，按需增加特殊性。