CSS选择器（1）

CSS选择器的作用是找出某类元素，以便使用style元素或者外部样式对所选元素设置样式。

1.CSS基本选择器

1.1 选择所有元素

 通用选择器匹配文档中的所有元素

选择器       *

匹配          所有元素

1.2 类型选择元素

指定元素类型为选择器选取一个文档中该元素的所有实例

选择器     <元素类型>  

匹配        所有指定类型的元素

 1.3 类选择器

采用全局属性class匹配指定类的元素

选择器    .<类名>(或 *.<类名>)  或 <元素类型>.<类名>

匹配        所有指定类的元素；当和元素类型一起使用时，匹配属于指定类的特定类型的元素

1.4 ID选择器

根据全局属性id的值选择元素

选择器    #<id值> 或<元素类型>#<id值>

匹配        具有指定全局属性id值的元素;与元素类型一起使用时，匹配指定ID值的特定类型的元素

1.5 属性选择器

基于属性的不同方面匹配属性

选择器   [<条件>] 或<元素类型>[<条件>] 

匹配       匹配具有指定条件的属性的元素条件

 条件                                                                      说明                                                                                                                                              

[attr]                                          选择定义attr属性的元素，忽略属性值

[attr="val"]                                选择定义attr属性，且属性值为val的元素

[attr^="val]                               选择定义attr属性，且属性值以字符串val打头的元素
[attr$="val]                               选择定义attr属性，且属性值以字符串val结尾的元素

[attr*="val]                                选择定义attr属性，且属性值包含字符串val的元素
[attr~="val]                               选择定义attr属性，且属性值具有多个值，其中一个属性值为val的元素
[attr|="val]                                选择定义attr属性，且属性值为连字符分割的多个值，其中第一个为字符串val的元素

2 复合选择器

2.1 并集选择器

创建有逗号分割的多个选择器，将样式应用到单个选择器匹配的所有元素

选择器              <选择器>,<选择器>,<选择器>

匹配                  单个选择器匹配的所有元素的并集

2.1  后代选择器

选择包含有其它元素中的元素

选择器               <第一个选择器> <第二个选择器>（中间存在空格）

匹配                  匹配第一个选择器的元素的后代，且该后代元素匹配第二个选择器

2.2 选择子元素

子代选择器与后代选择器很像，不同之处在于子代选择器值匹配元素中的直接后代

选择器             <第一个选择器> > <第二个选择器>

匹配                 匹配第一个选择器的元素的直接后代，且该直接后代元素匹配第二个选择器

2.3 选择兄弟元素

选择紧跟在某元素之后的元素

选择器             <第一个选择器> + <第二个选择器>

匹配                 紧跟着匹配第一个选择器的元素，且该元素匹配第二个选择器

3 伪元素选择器

3.1   ::first-line选择器

匹配文本块的首行，为了向后兼容，浏览器会将两个冒号字符（::）认为只有一个冒号

3.2   ::first-letter

选择文本块的首字母

3.3  :before选择器和:after选择器

这两个选择器与之前的选择器不同，它们会生成内容，并将其插入文档

:before在选中元素之前插入内容   :after在选中元素之后插入内容

a:before{content:"click"}

attr^="val]                                选择定义attr属性，且属性值以字符串val打头的元素

[attr^="val]                                选择定义attr属性，且属性值以字符串val打头的元素