CSS选择器归纳

基本选择器

• id选择器 #
• 类选择器 .
• 后代选择器 空格
• 元素选择器 标签名
• 分组选择器 ,(结合符)
• 通配符选择器 *

基本选择器扩展

• 子元素选择器 >
  – 只匹配到直接后代，不能匹配到深层的后代元素
• 相邻兄弟选择器 +
  – 只匹配紧跟着的兄弟元素
• 通用兄弟选择器 ~
  – 匹配所有的兄弟元素
• 分组选择器 ,(结合符)
  – h1,h2,h3{}

属性选择器

• [attr]
  – 选择包含attr 属性的所有元素，不论attr的取值为何
• [attr=val]
  – 仅选择attr属性被赋值为val的所有元素
• [attr~=val]
  – 表示带有以attr命令属性的元素， 并且该属性是一个以空格作为分隔的值
  – 例如 [name~="csdn"] 匹配 name="csdn" 或 name="csdn blog" 但不匹配name="csdnblog"
• [attr|=val]
  – 选择attr属性的值为val或者以val-开头的元素
• [attr^=]
  – 选择attr属性的值以val开头（包括val）的元素
• [attr$=val]
  – 选择attr属性的值以val结尾（包括val）的元素
• [attr*=val]
  – 选择attr属性的值包含字符串val的元素

伪类和伪元素选择器

链接伪类

• :link
  – 表示作为超链接，并指向一个未访问的地址的所有锚
• :visited
  – 表示作为超链接，指向一个已访问的地址的所有锚，并且只支持color、background-color、border-color三种属性
• :target
  – 代表一个特殊的元素，它的id是URI的片段标识符
  注意以上三种伪类只作用于链接元素

动态伪类

• :hover
  – 表示悬浮到元素上
• :active
  – 表示匹配被用户激活的元素(点击按住时)
  由于a标签的:link和:visited可以覆盖a标签所有的状态，应该让选择范围较大的选择器出现在前面，正确的顺序为:link、:visited、:hover、:active

表单伪类

• :enabled
  – 匹配可编辑的表单
• :disable
  – 匹配被禁用的表单
• :checked
  – 匹配被选中的表单
• :focus
  – 匹配获焦的表单

结构性伪类

index 从 1开始计数
index 可以为 even odd
index 可以为变量n 代表0到正无穷

• :nth-child(index)
  – 如#wrap ele:nth-child(index)匹配#wrap中第index的子元素，且这个子元素必须是ele
• :first-child
• :last-child
• :nth-last-child(index)
• :only-child
• :nth-of-type(index)
  – 如#wrap ele:nth-of-type(index)匹配#wrap中第index的ele子元素
• :first-of-type
• :last-of-type
• :nth-last-type
• :only-of-type
• :not
  – 匹配条件取反的元素
• :empty
  – 匹配空元素，不允许有内容，空格也不行，可以有attr

伪元素

• ::after
  – 选中元素后面的伪元素
• ::before
  – 选中元素前面的伪元素
• ::firstLetter
  – 选中文本的第一个字母
• ::firstLine
  – 选中文本的第一行
• ::selection
  – 匹配选中的文本