Css3选择器

css3基本选择器
(1) 子元素选择器: >选择到元素的直接后代
(2) 通用选择器: 选择所有的元素
清除一下默认边距
(3) 相邻兄弟元素选择器:+选择到目标元素后的第一个元素
(4) 普通兄弟元素选择器: ~选择到目标元素后的所有兄弟元素
在这里插入图片描述
css3结构选择器
(1) :nth-child 选择指定索引处的子元素
(2) :nth-child(n) 父元素下的第n个元素(n从1开始)
(3) :first-child 选择父元素下的第一个子元素
(4) :last-child 选择父元素下的最后一个子元素
(5) :nth-last-child(n) 选择父元素下的倒数第n个子元素
(6) :nth-of-type(n) 选择父元素下第n个指定类型的子元素
(7) :nth-last-of-type(n) 选择父元素下倒数第n个指定类型的子元素
(8) :only-child 选择父元素仅有的一个也是唯一一个子元素
(9) :only-of-type 选择父元素下指定类型的唯一子元素
(10) :root 选择文档根目录,返回html
Css3选择器_第1张图片
css3属性选择器
(1) Element[shuxingming] :选择所有带有shuxingming属性元素
(2) Element[shuxingming=”value”]:指定属性名并指定元素,选择所有shuxingzhi=”value”的元素
(3) Element[shuxingming~=”value”]:指定shuxingming,包含单词“value”的所有元素
(4) Element[shuxingming
=”value”]: 选择shuxingming属性值包含 “value” 的所有元素
(5) Element[shuxingming^=”value”]:选择shuxingming属性值以”value”开头的所有元素
(6) Element[shuxingming$=”value”]:选择 shuxingming 属性值以”value”结尾的所有元素
(7) Element[shuxingming|=”value”]:选择 shuxingming 属性值以”value-“开头的所有元素
Css3选择器_第2张图片
css3伪类选择器
(1) :link 选择链接元素
(2) :visited 选择用户访问过的元素
(3) :hover 鼠标悬停的元素
(4) :focus 获取当前焦点的元素
(5) :active 活动链接
(6) :input:focus input表单元素获取焦点
(7) :input:blur input表单元素失去焦点
Css3选择器_第3张图片

你可能感兴趣的:(html5,css3)