CSS进阶知识点--CSS3基本选择器及属性选择器

基本选择器

• 通配符选择器

• 元素选择器

• 类选择器

• ID选择器

• 后代选择器

• 子元素选择器

• 相邻兄弟选择器

• 通用兄弟选择器

• 群组选择器

前五个请参考CSS基础知识点--选择器

子元素选择器

概念

子元素选择器只能选择某元素的子元素

语法格式

父元素 > 子元素（father > child）

相邻兄弟选择器

概念

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

语法格式

元素 + 兄弟相邻元素（Element + Sibling）

通用兄弟选择器

概念

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

语法格式

元素 ~ 后面所有兄弟相邻元素（Element ~ Sibling）

群组选择器

概念

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

语法格式

元素1，元素2，...，元素n（Element1,Element2,...,Element3）

属性选择器

对带有制定属性的 HTML 元素设置样式

使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值

Element[attribute]

概念

选择所有带有 attribute 属性元素

Element[attribute~="value"]

概念

选择 attribute 属性有单词"value"的所有元素（属性不止一个属性值，其中一个属性值为"value"）

注意：该属性选择器用于选取属性值中包含指定词汇的元素，只要是指定的属性，并且属性值列表中包含value，而不是在某个值中以value开头或结尾

Element[attribute^="value"]

概念

选择 attribute 属性值以"value"开头的所有元素

注意：该属性选择器匹配指定属性的指定value值开头的元素，如果class中有多个value值，第一个值中的第一个字母不是指定的值，即使后面的属性中首字母是指定的值，那么也不能匹配上

Element[attribute$="value"]

概念

选择 attribute 属性值以"value"结尾的所有元素

Element[attribute*="value"]

概念

选择 attribute 属性值包含"value"的所有元素（属性值中的单词包含）

Element[attribute|="value"]

概念

选择 attribute 属性值为"value"或以"value"开头的元素

属性选择器	作用
Element[attribute]	选择所有带有 attribute 属性元素
Element[attribute~="value"]	选择 attribute 属性有单词"value"的所有元素（属性不止一个属性值，其中一个属性值为"value"）
Element[attribute^="value"]	选择 attribute 属性值以"value"开头的所有元素
Element[attribute$="value"]	选择 attribute 属性值以"value"结尾的所有元素
Element[attribute*="value"]	选择 attribute 属性值包含"value"的所有元素（属性值中的单词包含）
Element[`attribute	="value"`]	选择 attribute 属性值为"value"或以"value-"开头的元素