html5选择器

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

伪类选择器

伪类选择器常见类型

1. 结构性伪类选择器
2. UI伪类选择器
3. 动态伪类选择器

结构性伪类选择器

• 结构性伪类选择器根据元素在文档中的位置进行选择

选择器类型	说明	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

方便记忆将结构性为选择器分为四类：

1. 通用子元素过滤器：E:nth-child(n)（顺序过滤）和E:nth-last-child(n)(逆序过滤)
2. 通用子类型元素过滤器：E:nth-of-type（顺序过滤）和E:nth-last-of-type(n)(逆序过滤)
3. 特定位置的子元素：E:first-child,E:last-child,E:first-of-type,E:last-of-type
4. 特定状态的元素：E:root（根节点）、E:only-child（独子元素）、E:only-of-type（独子类型元素）和E:empty（孤节点）

UI伪类选择器

• UI伪类选择器根据元素的状态进行选择

选择器类型	说明	css版本
: enabled	匹配处于启用状态的元素	css3
: disabled	匹配处于禁用状态的元素	css3
: checked	匹配处于选中状态的元素	css3
: default	匹配默认状态的元素 css3

动态伪类选择器

• 动态伪类选择器根据条件的改变进行选择，是相对文档的固定状态来说的

选择器类型	说明	css版本
: link	匹配链接的元素	css2
: visited	匹配已访问的链接元素	css2
: hover	匹配处于鼠标悬停状态的元素	css2
: active	匹配用户激活的元素	css2
: focus	匹配当前获得焦点的元素	css2

css选择器优先级计算

important>内联>ID >类标签|伪类|属性选择>|伪对象>继承