CSS选择器总结

一、语法：选择器+一条或多条声明；selector {declaration1; declaration2; ... declarationN }；

二、选择器分类：

1、元素选择器（类型选择器）：元素{ }

2、类选择器（class）：.类名{ } 或 元素.类名{ } 或 .类名1.类名2.~~（多类选择器）

3、ID选择器：#id名{} 或 #id 元素{} 或 元素#id{}

虽然标注为 id名 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次

4、属性选择器：[属性]={} 或 [属性=属性值]{} [属性~=属性值]{}（包含指定属性值的所有元素设置样式，适用于空格样式）或 [属性|=属性值]{}（包含属性值，适用于连字符，且连字符之前 的字母必须一致） 或 input[type=“”]{}(修改表单的样式)

-可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性；

-只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器；

-a[href] 只对有 href 属性的锚（a 元素）应用样式;

-img[alt] 可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像;

5、伪类选择器：用于向某些选择器添加特殊的效果

-语法：selector : pseudo-class {property: value}

例：a:hover（鼠标移至） a:visited（已访问） a:link（未访问） a:active（选定的链接）

顺序必须是：link——visited——hover——active

-伪类及类合用：例：a:类名 hover

-first-child：元素的第一个子元素（代码中第一次出现的元素）

例：匹配第一个元素：元素.first-child

匹配p元素中第一个i元素：p>i:first-child

匹配p元素中所有i元素：p:first-child i

-：lang ：:lang 伪类使你有能力为不同的语言定义特殊的规则

例：

q:lang(no)

{

quotes: "~" "~"

}（，:lang 类为属性值为 no 的 q 元素定义引号的类型：）

-. focus：向拥有键盘输入焦点的元素添加样式。

6、伪元素选择器：

-语法：selector:pseudo-element {property:value;}

-first-line：元素：first-line（伪元素用于向文本的首行设置特殊样式。只能用于块级元素）

-first-letter：元素：first-letter（向文本的首字母设置特殊样式）

-元素：before： 在元素之前增加新内容（content=URL（））

-元素：after：在元素之后增加新内容（content=URL（））

-伪元素与类：元素.类名：伪元素

7、派生选择器

7.1 后代选择器（即包含选择器）：元素 后代元素{}

7.2 子元素选择器（只能选择作为某元素子元素的元素）：元素>子元素

7.3 相邻兄弟选择器（选择紧接在另一元素后的元素，且二者有相同父元素）元素+紧接在元素后的元素

8、通配符选择器：*{}

9、选择器分组：之间用逗号相连