首页 > 代码库 > CSS3属性选择器详解 及 双色球实战开发
CSS3属性选择器详解 及 双色球实战开发
在前面的章节中，我们了解了，可以使用行内样式，ID选择器，类选择器，以及标签选择器来给一个元素应用样式。
如果我们想给定义了那些都定义了某一个属性的元素应用样式，这个时候我们该怎么做呢？
这一节中，我将使用 双色球案例 和 文档类型提示图标案例 来引入和应用属性选择器。
双色球案例：
大家都知道，双色球共有7个球，6个红球，1个蓝球。首先我们先在页面上面定义7个span标签：
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <link rel=”stylesheet” href=http://www.mamicode.com/”styles_20140705.css”> <title>CSS3 属性选择器</title> </head> <body> <div class="container"> <!-- 实战互联网 http://www.itdriver.cn --> </body> </html> |
此时运行页面，我们发现所有数字都连在一起：
接着我们在外部样式表中，通过标签选择器来调整数字球之间的距离:
.balls span{ margin-left:0.8em; } |
但是我们知道，每个球都有一个圆背景，这个怎么实现呢，在CSS2中，我们只能通过背景图片来做，而到了CSS3，我们只需要设置标签的角的半径(radius)，即可实现。如果大家看不懂下面的代码，没关系，后面会有一片专门的文章来讲解。现在大家只要记住下面的CSS3样式代码是用来设置圆角的就OK了。
我们把上面的样式代码做一下改良(红色字体为新增加的样式):
.balls span{ margin-left:0.8em; /*设置数字球之间的距离为0.8em*/ display:block; /*将数字球span设为块，便于调整宽和高*/ float:left; /*使数字球向左浮动，连在一行显示*/ width:1.4em; /*设置数字球span的宽高*/ height:1.4em; border:1px solid red;/*设置数字球边框为红色，这个是为了便于查看设置的样式是否已经生效*/ -webkit-border-radius:0.7em;/*设置span圆角半径，如果半径为总长度一半，则就形成了圆*/ -moz-border-radius:0.7em; border-radius:0.7em; text-align:center; /*使数字球中的字水平居中显示*/ line-height:1.4em; /*使数字球中的字垂直居中显示*/ } |
此时运行Demo，球体的雏形已经出来了:
有人会问，你样式怎么都写在同一个span标签选择器里了，怎么还没讲到属性选择器呢？
别急，上面这些样式都是所有球体共有的属性样式，故都写同一个标签里了。我们知道双色球，前六个为红球，最后一个为蓝球，那这个到底怎么处理呢？
我们先浏览一下知识点，属性选择器是从CSS2开始引入进来的，下面是CSS2中定义的属性选择器:
| E[attr] | 选择匹配定义了attr属性的E类型元素。注意，E类型可以省略，直接写[attr]，这就意味着匹配所有定义了attr属性的元素。 |
| E[attr="value"] | 选择匹配那些attr属性值设为value的E类型元素。注意，E类型可以省略，直接写[attr="value"]，这就意味着匹配所有attr=”value”的元素。 |
| E[attr~="value"] | 选择匹配那些attr属性值是列表形式的，且各个值是以空格分开的，且有一个值为value的所有E类型元素。注意E可以省略。 |
| E[attr|="value"] | 选择匹配那些attr属性值是value或是以value- 开头的E类型元素。注意，E类型可以省略。 |
| E[attr^="value"] | 选择匹配那些attr属性值是以value开头的E类型元素。注意，E标签选择符可以省略。 |
| E[attr$="value"] | 选择匹配那些attr属性值是以value为后缀的E类型元素。注意，E标签选择符可以省略。 |
| E[attr*="value"] | 选择匹配那些attr属性值包含value的E类型元素。注意E标签选择符可以省略。 |
其实从上表格中，我们可以看出，属性选择器其实就是给标签选择器加上属性限制，它就是标签选择器的进一步细化。
好了，当我们了解了属性选择器的基本知识之后，就可以给双色球加背景颜色了:
.balls span{ margin-left:0.8em; /*设置数字球之间的距离为0.8em*/ display:block; /*将数字球span设为块，便于调整宽和高*/ float:left; /*使数字球向左浮动，连在一行显示*/ width:1.4em; /*设置数字球span的宽高*/ height:1.4em; border:1px solid red;/*设置数字球边框为红色，这个是为了便于查看设置的样式是否已经生效*/ -webkit-border-radius:0.7em;/*设置span圆角半径，如果半径为总长度一半，则就形成了圆*/ -moz-border-radius:0.7em; border-radius:0.7em; text-align:center; /*使数字球中的字水平居中显示*/ line-height:1.4em; /*使数字球中的字垂直居中显示*/ color:#FFFFFF; /*设置span中字体颜色*/ box-shadow:0.15em 0.15em #999; /*给ball应用阴影效果，增加立体感*/ }
/*给所有的ball应用样式*/ .balls span[title]{ /*给设置了title属性的span 应用样式*/ background-color:#FF0000; } /*给class以blueball为结尾的span元素应用样式*/ .balls span[class$="blueball"]{ background-color:#0033CC; } |
此时运行我们的Demo，双色球效果图就出来了。
细心的网友可能已经发现，在第一个球中，我们同样设置了blueball样式，但是它依然是红色背景， 这就证明了E[attr$="value"]确实是给那些attr属性值以value为结尾的E元素添加样式的。
接下来，我们继续讲解文档类型提示图标案例：
首先创建页面:
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <link rel=”stylesheet” href=http://www.mamicode.com/”styles_2014070502.css”> <title>文档类型提示图标</title> </head> <body> <a href="http://www.itdriver.cn">实战互联网</a> <div> <dl> <dt>文档推荐列表</dt> <dd> <ul> <li><a href=http://www.mamicode.com/”http://www.baidu.com/doc/css3.pdf”>CSS3案例开发 <li><a href=http://www.mamicode.com/”http://www.baidu.com/doc/css3.ppt”>CSS3教程分享计划 <li><a href=http://www.mamicode.com/”http://www.baidu.com/doc/css3.doc”>CSS3相关博文 <li><a href=http://www.mamicode.com/”http://www.itdriver.cn”>作者个人主页 </ul> </dd> </dl> </div> </body> </html> |
运行页面Demo，由于暂时未加任何样式，效果如下图所示:
现在我们在外部样式表中应用样式:
.prefer_docs dd{ /*清除dd 到 dl 边框的距离*/ margin-left:0px; } .prefer_docs ul{/*重新设置ul样式*/ list-style-type:none; padding-left:0px; margin-left:0px; } .prefer_docs li{/*调整推荐文档的上下距离*/ margin-bottom:2px; } .prefer_docs a{/*去除文档超链接下划线*/ text-decoration:none; } .prefer_docs a:hover{/*给超链接应用鼠标滑过时的样式*/ color:red; text-decoration:underline; } .prefer_docs a span{ /*定义文档类型图标显示区域大小*/ background: no-repeat; display:block; height:16px; width:16px; float:left; margin-right:2px; } .prefer_docs a span{ /*导入文档类型背景图片*/ background-image:url(pkg_icon.png); } .prefer_docs a[href$="ppt"] span{/*所有以ppt为结尾的，应用ppt图标*/ background-position:-856px -36px; } .prefer_docs a[href*="pdf"] span{/*给链接中包含pdf文字的链接，应用pdf图标*/ background-position:-625px -36px; } .prefer_docs a[class|="doc"] span{/*给class以doc或者doc- 开头的链接，应用doc图标*/ background-position:-877px -36px; } .prefer_docs a[class~="net"] span{/* class属性中，含有net值的链接，应用Internet图标 */ background-position:-520px -36px; } |
最后我们看一下运行效果：
以上即为利用属性选择器，给文档下载链接应用相应图标的代码演示。
当然，还有很多选择器，比如伪类选择器，以及伪元素选择器，这里不再详述，在以后的实例中，如果用到，会做进一步的详述。
欢迎大家加入互联网技术交流群：62329335
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。