css选择器

    基本选择器

• 元素选择器

　　element{ 样式 }
　　通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素.

• 类选择器

　　.className{ 样式 }
　　在一个HTML文档中，CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

• ID选择器

　　#ID{ 样式 }
　　在一个HTML文档中,CSS ID 选择器会根据该元素的ID属性中的内容匹配元素,元素ID属性名必须与选择器中的ID属性名完全匹配，此条样式声明才会生效。

• 属性选择器

　　属性选择器通过已经存在的属性名或属性值匹配元素.
　　[attr]{ 样式 }
　　表示以attr命名的属性名的元素
　　[attr=value]{ 样式 }
　　表示以attr命名的属性名，且该属性的值为value元素
　　[attr~=value]{ 样式 }
　　表示以attr命名的属性名，且该属性的值是一个以空格作为分隔符的值列表，其中一个值为value的元素
　　[attr|=value]{ 样式 }
　　表示以 attr 命名的属性名，且该属性的值为“value”，或者该属性的值以“value-“（”-“为连字符，Unicode编码为U+002D）开头的元素。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW）.
　　[attr^=value]{ 样式 }
　　表示以 attr 命名的属性名,且该属性的值是以"value"开头的元素
　　[attr$=value]{ 样式 }
　　表示以 attr 命名的属性名,且该属性的值是以"value"结尾的元素
　　[attr*=value]{ 样式 }
　　表示以 attr 命名的属性名,且该属性的值中至少包含一个以"value"作为子串的元素

• 通用选择器

　　*{ 样式 }
　　在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,*.warning 和.warning 的效果完全相同.

    组合选择器

• 相邻兄弟选择器

　　element + element { 样式 }
　　相邻选择器. 它只会匹配紧跟其前方元素的同胞元素.

• 通用兄弟选择器

　　element ~ element { 样式 }
　　在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素 .

• 子选择器

　　parent > element { 样式 }
当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素.

• 后代选择器

　　parent element { 样式 }
　　当使用 ␣ 选择符 (这里代表一个空格,更确切的说是一个或多个的空白字符) 连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) . 后代选择器与 子选择器 很相似, 但是后代选择器不需要相匹配元素之间要有严格的父子关系.