首页 > 代码库 > 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 -->
<div class="balls">
<span title="01" class="blueball redball">01</span><span class="redball" title="02">02</span><span class="redball" title="03">03</span><span class="redball"                            title="04">04</span><span class="redball" title="05">05</span><span class="redball" title="06">06</span><span class="redball blueball" title="07">07</span>
</div>
</div>

</body>

</html>

 

此时运行页面,我们发现所有数字都连在一起:

 2014-08-03_151202

接着我们在外部样式表中,通过标签选择器来调整数字球之间的距离:

.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,球体的雏形已经出来了:

2014-08-03_151443

有人会问,你样式怎么都写在同一个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,双色球效果图就出来了。

2014-08-03_151722

细心的网友可能已经发现,在第一个球中,我们同样设置了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,由于暂时未加任何样式,效果如下图所示:

18DCDB8EE0FC47AABEA0EF845F2C6F8A

现在我们在外部样式表中应用样式:

.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;

}

最后我们看一下运行效果:

99F42C9956B74C51AF144856FA8ADFEF

以上即为利用属性选择器,给文档下载链接应用相应图标的代码演示。

当然,还有很多选择器,比如伪类选择器,以及伪元素选择器,这里不再详述,在以后的实例中,如果用到,会做进一步的详述。

 

欢迎大家加入互联网技术交流群:62329335

个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。