CSS3 基本选择器

回顾选择器

• 通配选择器
• 元素选择器
• 类选择器
• ID选择器
• 后代选择器

新增基本选择器

• 子元素选择器（直接后代选择器）

概念
子元素选择器只能选择某元素的子元素
语法格式
父元素 > 子元素

• 相邻兄弟元素选择器

概念
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且它们具有一个相同的父元素

语法格式
元素 + 兄弟相邻元素(Eelement + sibling)

例子


      
123
      

            
abc
      
      

            
efg
      

• 通用兄弟选择器

概念
选择某元素后面的所有兄弟元素，而且它们具有一个相同的父元素

语法格式
元素 ~ 后面所有兄弟相邻元素(Eelement ~ sibling)

例子


      
123
      

            
abc
      
      

            
efg
      

• 群组选择器

概念
群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号","隔开

语法格式
元素1,元素2,...元素n (Eelement1,Eelement2,Eelement3,...Eelementn)

例子


      

            
abc
      
      

            
efg
      
      
123

属性选择器

对带有指定属性的HTML元素设置样式
使用CSS3属性选择器，可以只指定元素的某个属性，或者还可以同时指定元素的某个属性和其对应的属性值

• Element[attribute]

概念
 为带有 attribute 属性的Element 元素设置样式

例子

attribute

• Element[attribute="value"]

概念
 为 attribute="value" 属性的 Element 元素设置样式

例子

attribute

• Element[attribute~="value"]

概念
 选择 attribute 属性包含单词"value"的元素，并设置其样式

例子

attribute
attribute

• Element[attribute^="value"]

概念
 设置 attribute 属性值以"value"开头的所有 Element 元素的样式

例子

attribute
attribute
attribute
attribute

• Element[attribute$="value"]

概念
 设置 attribute 属性值以"value"结尾的所有 Element 元素的样式

例子

attribute
attribute
attribute
attribute

• Element[attribute*="value"]

概念
 设置 attribute 属性值包含"value"的所有 Element 元素的样式

例子

attribute
attribute
attribute
attribute

• Element[attribute|="value"]
  1：属性值为"value"
2：属性值以"value-"开头

概念
 选择 attribute 属性值为"value"或以"value-"开头的元素，并设置其样式

例子

attribute
attribute
attribute
attribute