HTML入门第八天之一天带你学会所有选择器

22种选择器的理论逻辑

标签选择器

选择对应标签

*通配符选择器

适用于全部标签

id选择器

选择对应id

类名选择器

选择对应类名

逗号选择器

满足逗号左边右边都算

空格选择器

满足嵌套关系

• 空格后是子孙元素

大于号选择器

满足嵌套关系

• 其后是子元素

  • 空格后是子元素

加号选择器

满足并列关系

• 俩元素相近

波浪号选择器

满足并列关系

• 号后所有满足元素

[属性名]{}

拥有属性名的标签

[属性名=“val”]{}

拥有属性名且值为val的标签

[属性名^=“val”]{}

拥有属性名且值为以val开头的标签

[属性名$=“val”]{}

拥有属性名且值为以val结尾的标签

[属性名*=“val”]{}

拥有属性名且值为含有val字符串的标签

[属性名~=“val”]{}

拥有属性名且其中一个值为val的标签

伪类

a以上四种用于超级连接样式时顺序不能发生变化

• :linek初始颜色颜色。
• :visited用于访问过颜色。
• :hover用于当用户把鼠标移动到元素上面时的效果；
• :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）

:focus聚焦

:checked选中

:disabled禁用

特殊选择器

:first-child 作为父标签的第一个子标签

:last-child 作为父标签的最后一个子标签

:nth-child(n) 作为父标签的第N个子标签 数字、even偶数、odd奇数

:nth-last-child(n) 作为父标签的倒数第N个子标签 数字、even偶数、odd奇数

:only-child 作为父标签的唯一一个子标签

:nth-of-type() 只参考当前种类

:nth-last-of-type() 只参考当前种类

:first-of-type

:last-of-type 只参考当前种类

:only-of-type 只参考当前种类

empty 没有子标签，没有内容

：not