欢迎光临
我们一直在努力
当前位置：前端学习分享网 > 前端技术 > CSS3学习笔记 > 正文

CSS3选择器

2016-11-13 分类：CSS3学习笔记 阅读(2704) 评论(0)

CSS 元素选择符

属性 版本 简介
* CSS2 CSS2 通配选择符(*)，所有元素对象。
E CSS1 CSS1 类型选择符(E)，以文档语言对象类型作为选择符。
E#myid) CSS1 CSS1 ID选择符(E#id),以唯一标识符id属性等于myid的E对象作为选择符。
E.myclass CSS2 CSS1 类选择符(E.class),以class属性包含myclass的E对象作为选择符。

CSS 关系选择符

属性 版本 简介
E F CSS1 CSS1 包含选择符(E F),选择所有被E元素包含的F元素。
E>F CSS2 CSS2 子选择符(E>F),选择所有作为E元素的子元素F。
相邻选择符(E+F) CSS2 CSS2  相邻选择符(E+F),选择紧贴在E元素之后F元素。
兄弟选择符(E~F) CSS3 CSS3 兄弟选择符(E~F),选择E元素所有兄弟元素F。

CSS 属性选择符

属性 版本 简介
E[att] CSS2 CSS2 属性选择符 E[att]，选择具有att属性的E元素。
E[att="val"] CSS2 CSS2 属性选择符 E[att="val"]，选择具有att属性且属性值等于val的E元素。
E[att~="val"] CSS2 CSS2 属性选择符 E[att~="val"]，选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^="val"] CSS3 CSS3 属性选择符 E[att^="val"]，选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] CSS3 CSS3 属性选择符 E[att$="val"]，选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] CSS3 CSS3 属性选择符 E[att*="val"]，选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"] CSS2 CSS2 属性选择符 E[att|="val"]，选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

CSS 伪类选择符

属性 版本 简介
E:link CSS1 CSS1 伪类选择符 E:link ，设置超链接a在未被访问前的样式。
E:visited CSS1 CSS1 伪类选择符 E:visited，设置超链接a在其链接地址已被访问过时的样式。
E:hover CSS2 CSS2/CSS1 伪类选择符 E:hover，设置元素在其鼠标悬停时的样式。
E:active CSS2/CSS1 CSS2/CSS1 伪类选择符 E:active,设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus CSS2/CSS1 CSS2/CSS1 伪类选择符 E:focus,设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:lang() CSS2 CSS2 伪类选择符 E:lang() 匹配使用特殊语言的E元素。
E:not() CSS3 CSS3 伪类选择符 E:not() 匹配不含有s选择符的元素E。
E:root CSS3 CSS3 伪类选择符 E:root，匹配E元素在文档的根元素。
E:first-child CSS2 CSS2 伪类选择符 E:first-child 匹配父元素的第一个子元素E。
E:last-child CSS3 CSS3 伪类选择符 E:last-child 匹配父元素的最后一个子元素E。
E:only-child CSS3 CSS3 为例选择符 E:only-child 匹配父元素仅有的一个子元素E。
E:nth-child(n) CSS3 CSS3 伪类选择符 E:nth-child(n) 匹配父元素的第n个子元素E。
E:nth-last-child(n) CSS3 CSS3 伪类选择符 E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
E:first-of-type CSS2 CSS3 伪类选择符 E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type CSS3 CSS3 伪类选择符 E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type CSS3 CSS3 伪类选择符 E:only-of-type，匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) CSS3 CSS3 伪类选择符 E:nth-of-type(n)，匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) CSS3 CSS3 伪类选择符 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty CSS3 CSS3 伪类选择符 E:empty 匹配没有任何子元素（包括text节点）的元素E。
E:checked CSS3 CSS3 伪类选择符 E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox 的form元素)
E:enabled CSS3 CSS3 伪类选择符 E:enabled 匹配用户界面上处于可用状态的元素E。
E:disabled CSS3 CSS3 伪类选择符 E:disabled 匹配用户界面上处于禁用状态的元素E。
E:target CSS3 CSS3 伪类选择符 E:target 匹配相关URL指向的E元素。
@page:first CSS2 CSS2 伪类选择符 @page:first 设置页面容器第一页使用的样式。仅用于@page规则
@page:left CSS2 CSS2 伪类选择符 @page:left 置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
@page:right CSS2 CSS2 为对象选择符 @page:right 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

CSS 伪对象选择符

属性 版本 简介
E:first-letter/E::first-letter CSS3/CSS1 CSS2/CSS1 E:first-letter/E::first-letter 伪对象选择符，设置对象内的第一个字符的样式。
E:first-line/E::first-line CSS3/CSS1 CS3/CSS1 伪对象选择符 E:first-line/E::first-line，设置对象内的第一行的样式。
E:before/E::before CSS3/CSS2 CSS3/CSS3 伪对象选择符 E:before/E::before，设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after CSS3/CSS2 CSS3/CSS2 伪对象选择符 E:after/E::after，设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::selection CSS3 CSS3 伪对象选择符 E::selection，设置对象被选择时的颜色。

这种颜色的表示是CSS3属性或原属性被CSS3修改并增加了新的属性值

赞(0) 打赏
未经允许不得转载：前端学习分享网 » CSS3选择器
标签：

相关推荐

评论 抢沙发

评论前必须登录！

 

分类

热门标签

JavaScript (11)CSS (7)WordPress (5)css3 (5)JQuery (4)phpcms (4)dedecms (4)伪静态 (3)xhtml (3)PHP (2)CSS选择器 (2)数组 (2)数据类型 (2)函数传参 (2)织梦 (2)Canvas (2)border (1)css sprite (1)图像拼接 (1)DIV (1)Web (1)Android (1)模拟器 (1).Net (1)iis (1)服务器 (1)DIV+CSS (1)IIS6 (1)Rewrite (1)tag标签 (1)

网站统计

  • 日志总数：89
  • 标签总数：128
  • 页面总数：0
  • 链接总数：0

近期文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏