码迷,mamicode.com
首页 > Web开发 > 详细

css3中新增的一些有用的选择器

时间:2015-09-07 19:16:19      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

       css3中新增呢很多新的玩意!有的东西玩着玩着就会被玩坏(呵呵,只是没什么用很鸡助),这来总结下我认为有用的, 不喜勿喷!有错误就请指出!绝对自己总结的,不当伸手党!

 

属性选择器:
    div[index]{background:red}    表示div下面带index属性的背景为红色
    div[index=a]{background:red}  表示div下面的自定义属性index=a的div的颜色变成红色。
    div[index~=a]{background:red}    只要div中index属性带a这个单词的就生效。
    div[index*=a]{background:red}     只要div里面的index属性带a字母的就生效。
    div[index^=a]{background:red}   以a开头的
    div[index$=a]{background:red}    以a结尾
    div[index|=a]{background:red}    只要以a-开头的

 

  当需要多个的时候: div[key1=value1][key2=value2][key3=value3]....{background:red}
 
结构性伪类选择器:
 
        element:nth-child(n)   第几个元素,从一开始!!
        element:nth-child(odd)奇数
        element:nth-child(even)偶数
        element:nth-last-child(n) 从倒数第几个开始
        element:last-child    最后一个
        element:first-child    第一个
 
文本伪元素
    p:first-line{}第一行
    p:first-letter{}第一个字
    p::selection{}文字选中时的时候  :: 代表超伪类  没有p的时候代表全部变
 
其他
:empty  空元素
:disabled   不可操作的元素
:enabled  可操作的元素
:checked  选中的元素
:not(some)不包含some的元素
:target  锚点对应的元素
::before{content:‘‘}必须有content属性
::afert{content:‘‘}

  

 

css3中新增的一些有用的选择器

标签:

原文地址:http://www.cnblogs.com/jeciky/p/4789692.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!