有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

css3新增的选择器有哪些

代码编程 cat 11个月前 (10-29) 39次浏览 已收录 0个评论 扫描二维码

css3新增属性选择器:

[属性名^="属性值val"] 选择带有指定属性名和属性值【以val开头】 的元素

[属性名*="属性值val"] 选择带有指定属性名和属性值【包含val】 的元素

[属性名$="属性值val"] 选择带有指定属性名和属性值【以val结束】 的元素

 

css3新增结构伪类选择器:

标签名:last-child{} 选择元素中【最后一个】子元素

标签名:nth-child(n){} 选择元素中【正数第n个】子元素

标签名:nth-last-child(n){} 选择元素中【倒数第n个】子元素

标签名:nth-child(even){} 选择元素中【正数偶数】子元素

标签名:nth-last-child(odd){} 选择元素中【倒数奇数】子元素

关键字:even 偶数  odd 奇数

 

E:first-of-type{} 选择元素中[类型]为E的【第1个】[子元素]

E:last-of-type{} 选择元素中[类型]为E的【最后1个】[子元素]

E:nth-of-type(n){} 选择元素中[类型]为E的【正数第n个】[子元素]

E:nth-last-of-type(n){} 选择元素中[类型]为E的【倒数第n个】[子元素]

 

区别:

如果元素类型一致时(比如都是li,都是p等),表现与child是一致的

如果元素的类型不一致,对于of-type这一组来说,先强调类型,再查找类型中的第几个

对于child这一组,强调结构关系,始终先确定是不是父元素中第几个子元素

 

状态伪类:

:enabled{} 选择处于可用状态的元素

:disabled{} 选择处于禁用状态的元素

:checked{} 选择处于选中状态的元素(适用于input  checkbox和radio)

不兼容ie9以下

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址