• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
pengpenglin
乐于工作,享受生活。
博客园    首页    新随笔    联系   管理    订阅  订阅
css3选择器

css选择器分类:基本选择器,属性选择器,伪类选择器。

基本选择器:元素选择器,类选择器,id选择器,后代选择器,群组选择器。

  后代选择器包括:E F(所有后代) , E>F(直接子后代) , E+F(相邻兄弟元素选择器) , 通用兄弟选择器:E~F(选择某元素后面的所有兄弟元素,和相邻兄弟元素一样,需要在同一个父元素当中)。ie6不支持后三中方法。

  群组选择器:(select1,select2,select3);

 

属性选择器:E[attr] , E[attr="value"] , E[attr~="value"] , E[attr^="value"] , E[attr$="value"] , E[attr*="value"] , E[attr|="value"] 

  E[attr~="value"]:这种属性选择器是属性值是一个或多个词列表,如果是列表时,他们需要用空格隔开,只要属性值中有一个value相匹配就可以选中该元素.

  E[attr|="value"]:称为特定属性选择器。这个选择器会选择attr属性值等于value或者以value-开头的所有元素。

属性选择器除了IE6不支持外,其他浏览器都能支持。

 

伪类选择器:

  动态伪类: :link , :visited , :hover , :active , :focus。对于前四个伪类的设置要遵守一个爱恨原则LoVe/HAte,也就是link-visited-hover-active。对于:hover在IE6下只有a元素支持,:active只有IE7-6不支持,:focus在IE6-7下不被支持。

  UI状态伪类::enabled , :disabled , :checked. IE6-8不支持":checked",":enabled",":disabled"这三种选择器.

  css3的:nth选择器: :first-child , :last-child , :nth-child() , :nth-last-child , :nth-of-type() , :nth-last-of-type() , :first-of-type , :last-of-type , :only-child , only-of-type , :empty。

  其中:nth-child(n)n是从0开始计算的,单是n=0没有选择元素,n=1选择第一个li,写:nth-child(n)则将会选中所有的元素。。。。    :nth-child()”是从元素的第一个开始计算,而“:nth-last-child()”是从元素的最后一个开始计算,他们的计算方法都是一样的。同样在IE6-8和FF3.0-浏览器不支持“:nth-last-child()”选择器。

  :nth-of-type类似于:nth-child , 不同的是它只计算选择器中指定的那个元素,个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处,比如说div.demo下有好多p元素,li元素,img元素等,但我只需要选择p元素,并让他每隔一个p元素就有不同的样式,那我们就可以简单的写成:.demo p:nth-of-type(odd){}. 。。。同样在IE6-8和FF3.0-浏览器不支持这种选择器。

  否定选择器::not

  伪元素: :first-line ,  :first-letter , :before , :after , :selection

    ::section 匹配被用户选取的部分。只能向::section选择器应用少量css属性:color,background。cursor及outline。

 

posted on 2014-10-08 15:28  pengpenglin  阅读(171)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3