CSS3 新增选择器

来源:互联网 发布:网络购物的发展趋势 编辑:程序博客网 时间:2024/06/06 19:04
新增选择器 用法 描述 element1~element2 p~u 选择在同一个父级元素下的p后面的所有的ul [attribute^=value] a[src^=”https”] 选择其 src 属性值以 “https” 开头的每个 a 元素 [attribute$=value] a[src$=”.pdf”] 选择其 src 属性以 “.pdf” 结尾的所有 a 元素 [attribute*=value] a[src*=”abc”] 选择其 src 属性中包含 “abc” 子串的每个 元素 :first-of-type] p:first-of-type 选择属于其父元素的首个p元素的每个p 元素(可能会有多个) :last-of-type p:last-of-type 选择属于其父元素的最后p元素的每个p元素(可能会有多个) :only-of-type p:only-of-type 选择属于其父元素唯一的p 元素的每个p元素(可能会有多个,且表示父元素可以有很多个子元素,而其中只有一种类型的子元素p是唯一的) :only-child p:only-child 选择属于其父元素的唯一子元素的每个p元素(父元素有且只有一个子元素,而且必须是p) :nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素是p的每个 p 元素 :nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数 :nth-of-type(n)) p:nth-last-child(2) 选择属于其父元素第二个 p 元素的每个p元素(只选择所有子元素p中的第二个元素) :nth-last-of-type(n)) p:nth-last-child(2) 同上,从最后一个子元素开始计数 :nth-last-child(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数 :last-child p:last-child 选择属于其父元素最后一个子元素是p每个 p 元素 :not(selector) :not(p) 选择非 p 元素的每个元素 ::selection ::selection{color:#f00;} 被用户选取的元素的字体会变成红色 :target p:target 突出显示活动的 HTML 锚 :enabled input[type=”text”]:enabled 选择所有 type=”text” 的被启用的 input 元素 :disabled input[type=”text”]:disabled 选择所有 type=”text” 的被禁用的 input 元素

—- 最后给出W3C中的选择器参考手册

原创粉丝点击