CSS3选择器

翻译 2018年04月15日 22:49:20

CSS3属性选择器:

  1. E[attr]只使用属性名,但没有确定任何属性值
  2. E[type="text"]指定属性名,并指定了该属性的属性值
  3. E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的"~"不能不写
  4. E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的
  5. E[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的
  6. E[attr*="value"]指定了属性名,并且有属性值,而且属值中包含了value
  7. E[attr|="value"]指定了属性名,并且属性值是value或者以"value-"开头的值(比如说zh-cn)

CSS3结构性伪类:

  1. E:nth-child(n) 表示E父元素的第n个子节点,且类型为E
  2. p:nth-child(odd){background:red} /*匹配奇数行*/
  3. p:nth-child(even){background:red} /*匹配偶数行*/
  4. p:nth-child(2n){background:red}
  5. E:nth-last-child(n) 表示E父元素的第n个子节点,从后向前算,且类型为E
  6. E:nth-of-type(n) 表示E父元素的第n个E子节点
  7. E:nth-last-of-type(n)表示E父元素的第n个E子节点,从后向前算
  8. E:empty 表示E元素没有子节点。注意:包含文本节点
  9. E:first-child 表示E父元素中的第一个子节点,且类型为E
  10. E:last-child 表示E父元素中的最后一个子节点,且类型为E
  11. E:first-of-type 表示E父元素中的第一个E子节点
  12. E:last-of-type 表示E父元素中的最后一个E子节点
  13. E:only-child表示E父元素中只有一个子节点。注意:不包含文本节点
  14. E:only-of-type 表示E父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:不包含文本节点

CSS3伪类:

  1. E:target 表示当前的URL片段的元素类型(id被a的href链接并被点击),这个元素必须是E(详见:伪类target效果)
  2. E:disabled 表示不可点击(获取焦点)表单控件
  3. E:enabled 表示可点击(获取焦点)的表单控件
  4. E:checked 表示已选中的checkbox或radio
  5. E:first-line 表示E元素中的第一行
  6. E:first-letter 表示E元素中的第一个字符
  7. E::selection表示E元素在用户选中文字时(moz)
  8. E::before 生成内容在E元素前
  9. E::after 生成内容在E元素后
  10. E:not(s) 表示E选中的元素中的s不被匹配(s是标签名)
  11. E~F 表示E元素毗邻的所有F元素(之后的所有同级元素,类似于nextAll()),下一个F元素则要用"+"

名师精讲CSS3

CSS3即层叠样式表(Cascading Style Sheet), 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。 本课程讲述了CSS3的实战应用,包括对网页修改以及对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
  • 2015年12月28日 14:05

前端知识学习-----CSS3新增选择器

CSS常见的选择器有: 通配符选择器, 元素选择器,类选择器, ID选择器,后代选择器 CSS3新增基本选择器有: 子元素选择器,相邻兄弟选择器,通用兄弟选择器,群组选择器 基本选择器...
  • kf_qyl
  • kf_qyl
  • 2018-01-08 17:12:02
  • 180

css3-新增的选择器

1.css3新增的3个属性选择器[attribute^="value"] eg:a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 元素。[attribute$="...
  • github_34514750
  • github_34514750
  • 2016-04-11 15:36:07
  • 835

CSS3选择器(全)

CSS选择器复习通用选择器:* 选择到所有的元素 选择子元素:> 选择到元素的直接后代(第一级子元素) 相邻兄弟选择器:+ 选择到紧随目标元素后的第一个元素 普通兄弟选择器:~ 选择到紧随其...
  • liuyan19891230
  • liuyan19891230
  • 2016-02-19 11:04:36
  • 8137

css3新增的选择器

css3的属性选择器 E[foo] 选择匹配E的元素,且该元素定义了foo属性。注意,E选择器可以省略,表示选择定义了foo属性的任意类型元素 E[foo="bar"] 选择匹...
  • wuzhe128520
  • wuzhe128520
  • 2016-04-17 19:54:22
  • 437

css3选择器详细探索

css3选择器详细探索 可链接W3School详细查看 CSS3(以下简称C3)是一种用于屏幕上渲染html,xml的一种语言,C3主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们...
  • xiaowu_hhb
  • xiaowu_hhb
  • 2016-11-16 15:58:11
  • 532

CSS3高级选择器用法

CSS3高级选择器用法介绍
  • qq_35718410
  • qq_35718410
  • 2016-08-24 17:16:49
  • 3070

jQuery与CSS3的选择器

jQuery与CSS在选择器方面,有很多的相似之处,本文稍加总结。 注:本文以jQuery1.9.1版本和CSS3为例进行说明,CSS在选择器方面存在兼容问题,请自行分辨。1 jQuery的版本 ...
  • aiolos1111
  • aiolos1111
  • 2016-08-02 16:52:44
  • 2152

CSS3介绍以及新增选择器

一:基本介绍 1:css版本 css1: 定义了网页的基本属性:字体,颜色,补白,基本选择器等等。 css2:添加了高级功能:浮动,定位,高级选择器(子选择器,相邻选择器,通用选择器) css...
  • u013628152
  • u013628152
  • 2015-04-21 18:00:06
  • 1139

CSS3序选择器学习记录

CSS3新选择器的学习,序选择器全纪录。
  • chenlinwei5
  • chenlinwei5
  • 2017-02-06 00:11:18
  • 252
收藏助手
不良信息举报
您举报文章:CSS3选择器
举报原因:
原因补充:

(最多只允许输入30个字)