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、选择器分组：之间用逗号相连