史上最全CSS3选择器_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
6
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 4702 | 回复: 5   主题: 史上最全CSS3选择器        上一篇   下一篇 
_chen
版主
等级:中校
经验:2139
发帖:39
精华:0
注册:2013-8-23
状态:离线
发送短消息息给_chen 加好友    发送短消息息给_chen 发消息
发表于: IP:您无权察看 2017-1-10 10:41:55 | [全部帖] [楼主帖] 楼主

一、CSS3选择器分类

a1.png

二、选择器语法

1、基本选择器

a2.png

2、层次选择器

a3.png

3、动态伪类选择器

a4.png

4、目标伪类选择器

a5.png

5、UI元素状态伪类选择器

a6.png

6、结构伪类选择器

a7.png

注:(1)“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li,仅有列表ul中第3个li元素前不存在其他的元素,命题才有意义,否则不会改变列表第3个li元素的样式
(2):nth-child(n)  中参数只能是n,不可以用其他字母代替
(3):nth-child(odd) 选择的是奇数项,而使用:nth-last-child(odd) 选择的却是偶数项

7、否定伪类选择器

a8.png

8、属性选择器

a9.png




赞(0)    操作        顶端 
_chen
版主
等级:中校
经验:2139
发帖:39
精华:0
注册:2013-8-23
状态:离线
发送短消息息给_chen 加好友    发送短消息息给_chen 发消息
发表于: IP:您无权察看 2017-1-10 10:43:53 | [全部帖] [楼主帖] 2  楼

自己顶一下



赞(0)    操作        顶端 
hui.chen
注册用户
等级:大校
经验:6070
发帖:48
精华:4
注册:2014-2-7
状态:离线
发送短消息息给hui.chen 加好友    发送短消息息给hui.chen 发消息
发表于: IP:您无权察看 2017-1-10 13:59:07 | [全部帖] [楼主帖] 3  楼

总结的不错,赞一个

楼主下次讲讲CSS3其他的特性吧


u=2871144702,1362725177&fm=21&gp=0.jpg.gif


赞(0)    操作        顶端 
blackTrc
注册用户
等级:少校
经验:853
发帖:13
精华:0
注册:2015-4-28
状态:离线
发送短消息息给blackTrc 加好友    发送短消息息给blackTrc 发消息
发表于: IP:您无权察看 2017-1-12 14:22:55 | [全部帖] [楼主帖] 4  楼

层次选择器中有点不太明白

E F 和E>F,能举例说一下吗


66.jpg



赞(0)    操作        顶端 
_chen
版主
等级:中校
经验:2139
发帖:39
精华:0
注册:2013-8-23
状态:离线
发送短消息息给_chen 加好友    发送短消息息给_chen 发消息
发表于: IP:您无权察看 2017-1-12 14:36:55 | [全部帖] [楼主帖] 5  楼

层次选择器中有点不太明白E F 和E>F,能举例说一下吗

E F表示的是E中所有匹配的F元素,而E>F表示的是E的子节点中匹配F的元素

例如:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />


$("form input")的结果是[ <input name="name" />, <input name="newsletter" /> ]

而$("form>input")的结果是[ <input name="name" /> ]




赞(0)    操作        顶端 
blackTrc
注册用户
等级:少校
经验:853
发帖:13
精华:0
注册:2015-4-28
状态:离线
发送短消息息给blackTrc 加好友    发送短消息息给blackTrc 发消息
发表于: IP:您无权察看 2017-3-16 17:55:47 | [全部帖] [楼主帖] 6  楼

谢谢楼主的分析


66.jpg



赞(0)    操作        顶端 
总帖数
6
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论