`
陌上花会开
  • 浏览: 39599 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS3属性选择器详解 及 双色球实战开发

    博客分类：
  • css3
css3属性选择器元素选择器双色球实战开发 
阅读更多

在前面的章节中，我们了解了，可以使用行内样式，ID选择器，类选择器，以及标签选择器来给一个元素应用样式。

如果我们想给定义了那些都定义了某一个属性的元素应用样式，这个时候我们该怎么做呢？

这一节中，我将使用 双色球案例 和 文档类型提示图标案例 来引入和应用属性选择器。

双色球案例：

大家都知道，双色球共有7个球，6个红球，1个蓝球。首先我们先在页面上面定义7个span标签：

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<link rel=”stylesheet” href=”styles_20140705.css”>

<title>CSS3 属性选择器</title>

</head>

<body>

<div class="container">

<a href="http://www.itdriver.cn">实战互联网</a>
<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=”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.baidu.com/doc/css3.pdf”><span></span>CSS3案例开发</a></li>

                        <li><a href=”http://www.baidu.com/doc/css3.ppt”><span></span>CSS3教程分享计划</a></li>

                        <li><a href=”http://www.baidu.com/doc/css3.doc”><span></span>CSS3相关博文</a></li>

                        <li><a href=”http://www.itdriver.cn”><span></span>作者个人主页</a></li>

                    </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

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

分享到：
| :link,:visited,:focus,:hover,:active详解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS属性选择器详解.pdf

    CSS属性选择器详解 CSS中的属性选择器是一种强大的选择器，允许开发者根据HTML元素的属性值来选择元素。今天，我们将深入探讨CSS属性选择器的详细解释。 什么是CSS属性选择器？ --------------------- CSS属性...

    web开发——CSS属性选择器.docx

    Web 开发——CSS 属性选择器 CSS 属性选择器是 CSS 中一种强大的选择器，允许开发者根据 HTML 元素的属性和值来设置样式。下面是 CSS 属性选择器的详细知识点： 什么是 CSS 属性选择器？ CSS 属性选择器是一种...

    CSS浮动属性Float详解 什么是CSS Float？

    CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性，允许页面元素浮动在其他元素旁边。Float 属性可以取四个值：Left、Right、None 和 Inherit。其中，Left 和 Right 分别浮动元素到左边和右边，...

    HTML5&CSS3网页制作：属性选择器.pptx

    其中，属性选择器是CSS3引入的一种高级选择器，极大地增强了对元素样式的控制能力。 属性选择器根据元素的属性及其属性值来选择元素，这使得我们可以无需额外添加class或id就能实现特定的样式应用。CSS3中新增了三...

    css属性选择器理解案列

    理解css属性选择器

    CSS选择器.pdf

    正确地理解和使用CSS选择器，能够让我们更加高效地进行前端开发，从而构建出更加丰富和互动的网页界面。了解各类型选择器的特点，对于优化样式的复用性、降低维护成本以及实现复杂的布局设计都至关重要。

    十种CSS选择器详解介绍

    ### 十种CSS选择器详解介绍 #### 一、通用选择器 - **定义**: 通用选择器使用星号 `*` 来表示，能够匹配HTML文档中的每一个元素。 - **示例**: ```css * { margin: 0; padding: 0; } ``` - **用途**: 常用于...

    详解CSS选择器HTML标签

    CSS选择器是网页样式设计中不可或缺的一部分，它们用于指定HTML或XML文档中元素的样式规则。...在实际开发中，结合CSS3的更多选择器特性，如伪类、伪元素等，可以创建出更为复杂且富有交互性的网页效果。

    详解CSS3中属性选择器新增加的特性

    在这些改进中，属性选择器得到了显著的提升，CSS3为属性选择器引入了新的匹配模式，使得我们可以更加灵活和细致地选择元素。 在CSS2中，属性选择器已经被支持，但其能力相对有限。CSS2的属性选择器支持以下几种模式...

    CSS中选择器优先级顺序实战讲解.pdf

    本文将详细解析CSS选择器优先级的实战应用，帮助开发者理解并解决样式覆盖的问题。 首先，我们要了解CSS选择器的四种基本类型，它们的优先级顺序如下： 1. **行内样式 (inline styles)**：这是最高优先级，通过`...

    css、html属性方法等详解手册

    深入学习CSS，必须掌握各种选择器的用法，例如后代选择器（`div p`）、子元素选择器（`div &gt; p`）、属性选择器（`[type="text"]`）和伪类（`:hover`、`:active`、`:focus`）。这些选择器能帮助精确地控制样式应用的...

    利用css＋javascript实现的一个日期选择器代码

    CSS文件会包含各种选择器（如类选择器、ID选择器等）和属性（如颜色、字体、布局等），以定制日期选择器的显示效果，包括按钮、日历视图、高亮选中日期等元素的样式。 2. `demo.htm`：这是一个HTML演示文件，用于...

    CSS3 calc()会计算属性详解

    正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法； calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和...

    CSS基本选择器实用PPT课件.pptx

    CSS 的标准目前有三个：CSS1、CSS2 和 CSS3，其中 CSS3 是最新的标准，增加了许多新的样式和效果。 二、CSS 基本语法 CSS 的基本语法由三部分组成：对象、属性和值。对象指定了对哪些网页元素进行设置，属性指定了...

    css+jquery选择器大全

    CSS与jQuery选择器是网页设计与开发中非常核心的技术之一。CSS选择器用于定位HTML文档中的元素，以便于对它们应用样式。而jQuery选择器则是jQuery库中用于选择和操作DOM元素的强大工具。接下来，我们将对这些选择器...

    python爬虫之css选择器

    ### Python爬虫之CSS选择器详解 #### 一、引言 在进行Web爬虫开发时，高效地从HTML文档中提取所需数据是一项基本而重要的技能。Python作为一门功能强大的编程语言，在网络爬虫领域有着广泛的应用。CSS选择器作为一...

    图解CSS3核心技术与案例实战pdf

    1. **选择器增强**：CSS3引入了更强大的选择器，如属性选择器、伪类和伪元素，使得对HTML元素的定位更为精确。例如，`:nth-child()` 可以根据元素在父元素中的位置进行选择，`:not()` 则可以排除特定的选择。 2. **...

    CSS3之学习必备书籍《CSS3 实战》

    1. **选择器**：CSS3引入了更强大的选择器，如伪类（`:hover`, `:active`, `:focus`等）、伪元素（`::before`, `::after`）以及属性选择器，使开发者能更精确地定位和控制元素。 2. **颜色和背景**：CSS3允许使用更...

    网页开发手记.HTML.CSS.JavaScript实战详解

    《网页开发手记--实战详解》由叶青、孙亚南、孙泽军编著，笔者将网页制作技术粗略划分为前台浏览器端技术和后台服务器端技术。本书主要学习前台浏览器端技术，也就是静态页面制作技术。早期只需要使用HTML即可单独...

Magicbox
Global site tag (gtag.js) - Google Analytics