html5选择器
属性选择器
- 属性选择器和标签选择器、id选择器、类选择器一样，都用于确定使用样式的元素。
- 主要通过属性名称和属性值匹配确定元素
［属性名］
｛
样式设置内容。。。
｝
属性选择器的条件
| 条件 |
说明 |
css版本 |
| [ attr ] |
选择具有attr属性名的元素 |
css2 |
| [ attr = “val“] |
同第一项，且值等于val的元素 |
css2 |
| [ attr ^= “val“] |
同第一项，且值以val开始的元素 |
css3 |
| [ attr $= “val“] |
同第一项，且值以val结束的元素 |
css3 |
| [ attr *= “val“] |
同第一项，且值包含val的元素 |
css3 |
| [ attr ～= “val“] |
同第一项，属性有多值，其中一个等于val的元素 |
css2 |
兄弟选择器
- 兄弟选择器通过一个元素获取宇宙同一层级的元素
- 分为普通兄弟选择器和相邻兄弟选择器
/*相邻兄弟选择器*/
选择器1 ＋ 选择器2｛
样式设置内容。。。
｝
/*普通兄弟选择器*/
选择器1 ~ 选择器2｛
样式设置内容。。。
｝
伪选择器
- 伪选择器并不直接对应html文档定义的元素，提供了更为复杂的功能
- 伪选择器分为两类，微元素选择器和伪类选择器
- 通常清下配合其他选择器一起使用
伪元素选择器
| 选择器类型 |
说明 |
css版本 |
| : : first-line |
选择文档块中的第一行 |
css1 |
| : : first-letter |
选择文档块中的首字母 |
css1 |
| : before |
在选中元素的内容之前插入内容 |
css2 |
| : after |
在选中元素的内容之后插入内容 |
css2 |
伪类选择器
伪类选择器常见类型
- 结构性伪类选择器
- UI伪类选择器
- 动态伪类选择器
结构性伪类选择器
| 选择器类型 |
说明 |
css版本 |
| : root |
根元素选择器，匹配文档根元素 |
css3 |
| : first-child |
子元素选择器，匹配父元素的第一个子元素 |
css2 |
| : last-child |
子元素选择器，匹配父元素的最后一个子元素 |
css3 |
| : only-child |
子元素选择器，匹配父元素包含的唯一子元素 |
css3 |
| : only-of-type |
子元素选择器，匹配父元素包含的唯一类型的子元素 |
css3 |
| : nth-child(n) |
匹配父元素中第n个子元素 |
css3 |
| : nth-last-child(n) |
子元素选择器，匹配父元素中倒数第n个子元素 |
css3 |
| : nth-of-type(n) |
匹配父元素中定义类型倒数第n个子元素 |
css3 |
| : nth-last-of-type(n) |
匹配父元素中定义类型倒数第n个子元素 |
css3 |
方便记忆将结构性为选择器分为四类：
- 通用子元素过滤器：E:nth-child(n)（顺序过滤）和E:nth-last-child(n)(逆序过滤)
- 通用子类型元素过滤器：E:nth-of-type（顺序过滤）和E:nth-last-of-type(n)(逆序过滤)
- 特定位置的子元素：E:first-child,E:last-child,E:first-of-type,E:last-of-type
- 特定状态的元素：E:root（根节点）、E:only-child（独子元素）、E:only-of-type（独子类型元素）和E:empty（孤节点）
UI伪类选择器
| 选择器类型 |
说明 |
css版本 |
| : enabled |
匹配处于启用状态的元素 |
css3 |
| : disabled |
匹配处于禁用状态的元素 |
css3 |
| : checked |
匹配处于选中状态的元素 |
css3 |
| : default |
匹配默认状态的元素 css3 |
动态伪类选择器
- 动态伪类选择器根据条件的改变进行选择，是相对文档的固定状态来说的
| 选择器类型 |
说明 |
css版本 |
| : link |
匹配链接的元素 |
css2 |
| : visited |
匹配已访问的链接元素 |
css2 |
| : hover |
匹配处于鼠标悬停状态的元素 |
css2 |
| : active |
匹配用户激活的元素 |
css2 |
| : focus |
匹配当前获得焦点的元素 |
css2 |
css选择器优先级计算
important>内联>ID >类标签|伪类|属性选择>|伪对象>继承
