web前端 > web前端
web前端web前端

css3新增选择器-基本选择器、层次选择器、伪类选择器

css3选择器
css3选择器分类

一、CSS选择器回顾

ID选择器,类名选择器,
标签选择器,组合选择器,
通配选择器,
子代选择器, > 选择到元素的直接后代
相邻兄弟选择器, + 选择到紧随目标元素后的第一个元素
属性选择器,[id]
伪类选择器
:before,:after在元素内容前面、后面添加内容(相当于行内元素)
  ::first-line 匹配文本块的首行
  ::first-letter 选择文本块的第一个字符

二、CSS3新增选择器

1.关联选择器
例: p ~ ul  选择p后面的ul
2.属性选择器新增
例:img[src^='image']  选择src属性以'image'开头的img标签
例:img[src$='png']  选择src属性以'png'结尾的img标签
例:img[src*='bg']  选择src属性包含'bg'的img标签
3. 伪类新增
例:p:first-of-type  选择p,这些p必须为它们各自父级的所有p子元素的第1个
例:p:last-of-type  选择p,这些p必须为它们各自父级的所有p子元素的最后1个
例:p:only-of-type  选择p,这些p必须为它们各自父级的唯一的p
例:p:only-child  选择p,这些p必须为它们各自父级的唯一子元素
例:p:nth-child(2)  选择p,这些p必须为它们各自父级的第2个[子元素]
例:p:nth-last-child(2)  选择p,这些p必须为它们各自父级的倒数第2个子元素
例:p:nth-of-type(2)  选择p,这些p必须为它们各自父级的所有p子元素的第2个
例:p:nth-last-of-type(2)  选择p,这些p必须为它们各自父级的所有p子元素的倒数第2个
例:p:first-child  选择p,这些p必须为它们各自父级的第一个子元素
例:p:last-child  选择p,这些p必须为它们各自父级的最后一个子元素
例:p:empty  选择没有内容的p
例:p:target  选择当前被锚点激活的p
例:input:enabled  选择能被操作的input 开启
例:input:disabled  选择不能被操作的input 关闭
例:input:checked  选择被选中的input 点击事件 对单选按钮和复选框
例:p:not(.on)  选择除了.on的p

4.伪元素新增
例:input::selection 选择被用户选中的input




web前端ruitiancnweb前端z_vae@sina.com

web前端