前端技术分享-码匠 极客编程技术分享

您当前位于:移动端开发 ——> CSS,CSS3都有哪些选择器?CSS选择器详细讲解(下)

CSS,CSS3都有哪些选择器?CSS选择器详细讲解(下)

2015/05/09 10:45:54 | 作者:HTML5学堂(码匠) | 分类:移动端开发 | 关键词:css,选择器,伪类选择器,属性选择器

CSS 1.0~3.0选择器(下)

HTML5学堂:对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用,我们那么有些选择器还是无法简单获取某元素,对于CSS3的选择器的产生,让我们更加方便的获取元素,本文讲解了CSS3的选择器有哪些,希望整理好的CSS3选择器对大家有帮助!谢谢!

6.CSS 3的同级元素通用选择器

选择器 含义 示例
E ~ F 匹配任何在E元素之后的同级F元素 p ~ ul { background:#ff0; }

7.CSS 3 属性选择器

选择器 含义 示例
E[att^=”val”] 属性att的值以”val”开头的元素

div[id^="nav"] { background:#ff0; }

E[att$=”val”] 属性att的值以”val”结尾的元素
E[att*=”val”] 属性att的值包含”val”字符串的元素

8. CSS 3中与用户界面有关的伪类

选择器 含义 示例
E:enabled 匹配表单中激活的元素

input[type="text"]:disabled { background:#ddd;}

E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
E::selection 匹配用户当前选中的元素

欢迎沟通交流~HTML5学堂

9. CSS 3中的结构性伪类

选择器 含义 示例
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素

p:nth-child(3) { color:#f00; }

p:nth-child(odd) { color:#f00; }

p:nth-child(even) { color:#f00; }

p:nth-child(3n+0) { color:#f00; }

p:nth-child(3n) { color:#f00; }

tr:nth-child(2n+11) { background:#ff0; }

tr:nth-last-child(2) { background:#ff0; }

p:last-child { background:#ff0; }

p:only-child { background:#ff0; }

p:empty { background:#ff0; }

E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

10.CSS 3的反选伪类

选择器 含义 示例
E:not(s) 匹配不符合当前选择器的任何元素

:not(p) { border:1px solid #ccc; }

11. CSS 3中的 :target 伪类

选择器 含义  
E:target 匹配文档中特定”id”点击后的效果  

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端