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

CSS3-新属性-属性选择器

时间:2016-04-11 22:32:17      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:

  CSS3之前,对于每个HTML标签来说,属性均是固定的。但是CSS3扩展了属性选择器的用法,用户可自定义标签的属性。下面介绍CSS3中属性选择器的使用方式,这些属性仅支持IE7及以上版本。

  标签的自定义属性和标签的固有属性写法一致,例如,给 3个p 标签自定义一个attribute的属性,且属性值分别为first、second,以及含有多个属性值 “third1 third2 third3 third4” 的p标签,此种写法称为属性值列表

    <p attribute="first"></p>

    <p attribute="second"></p>

    <p attribute="third1 third2 third3 third4"></p>

  使用自定义属性,可以给同一标签的不同属性或同一标签同一属性的不同属性值添加不同的样式,CSS3之前我们仅可根据class和id属性区分不同的标签。标签的不同选择语法如下:以p标签为例进行说明

  1、只选择属性名,不指定确切的属性值

    p[attribute]

  2、指定属性名,并指定看该属性的属性值

    p[attribute="value"]

  3、指定属性名,并指定属性值以value开头

    p[attribute^="value"]

  4、指定属性名,并且属性值以value结束

    p[attribute$="value"]

  5、指定属性名,并且属性值列表中存在为value的属性值

    p[attribute~="value"]

  6、指定属性名,并且属性值里含有value

    p[attribute*="value"]

  7、指定属性名,并且属性值是value或以value-开头

    p[attribute|="value"]

    以上为观看妙味课堂视频后的总结笔记,希望看到笔记的同学也能自己动手练习一下,收益会很大。

 

   

 

CSS3-新属性-属性选择器

标签:

原文地址:http://www.cnblogs.com/httgighter/p/5380129.html

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