在前面的章节中,我们了解了,可以使用行内样式,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>
|
此时运行页面,我们发现所有数字都连在一起:
接着我们在外部样式表中,通过标签选择器来调整数字球之间的距离:
.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=”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,由于暂时未加任何样式,效果如下图所示:
现在我们在外部样式表中应用样式:
.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
个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。
分享到:
相关推荐
CSS属性选择器详解 CSS中的属性选择器是一种强大的选择器,允许开发者根据HTML元素的属性值来选择元素。今天,我们将深入探讨CSS属性选择器的详细解释。 什么是CSS属性选择器? --------------------- CSS属性...
Web 开发——CSS 属性选择器 CSS 属性选择器是 CSS 中一种强大的选择器,允许开发者根据 HTML 元素的属性和值来设置样式。下面是 CSS 属性选择器的详细知识点: 什么是 CSS 属性选择器? CSS 属性选择器是一种...
在CSS3中,属性选择器和背景缩写是两个重要的概念,它们极大地提高了CSS的效率和可维护性。本文将详细探讨这两个主题。 首先,让我们来看看CSS3的属性选择器。属性选择器允许我们根据HTML元素的特定属性来选择和...
CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性,允许页面元素浮动在其他元素旁边。Float 属性可以取四个值:Left、Right、None 和 Inherit。其中,Left 和 Right 分别浮动元素到左边和右边,...
另外,CSS3的Flexbox或Grid布局可以方便地实现选择器的响应式设计,使其在不同屏幕尺寸上都能正常显示。 JQuery库在这当中起到了辅助作用,它简化了JavaScript的DOM操作,使得事件处理、元素操作和动画效果的实现...
理解css属性选择器
正确地理解和使用CSS选择器,能够让我们更加高效地进行前端开发,从而构建出更加丰富和互动的网页界面。了解各类型选择器的特点,对于优化样式的复用性、降低维护成本以及实现复杂的布局设计都至关重要。
CSS3是CSS的最新版本,引入了更多强大且灵活的选择器,使得网页设计和开发更加精细化。下面我们将详细探讨CSS3选择器的相关知识点。 1. 基本选择器: - **类型选择器**:通过元素名来选择元素,如`p`选择所有的...
下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
CSS选择器是网页样式设计中不可或缺的一部分,它们用于指定HTML或XML文档中元素的样式规则。...在实际开发中,结合CSS3的更多选择器特性,如伪类、伪元素等,可以创建出更为复杂且富有交互性的网页效果。
在这些改进中,属性选择器得到了显著的提升,CSS3为属性选择器引入了新的匹配模式,使得我们可以更加灵活和细致地选择元素。 在CSS2中,属性选择器已经被支持,但其能力相对有限。CSS2的属性选择器支持以下几种模式...
本文将详细解析CSS选择器优先级的实战应用,帮助开发者理解并解决样式覆盖的问题。 首先,我们要了解CSS选择器的四种基本类型,它们的优先级顺序如下: 1. **行内样式 (inline styles)**:这是最高优先级,通过`...
5.5_CSS3中filter属性详解|模糊效果和filter|canvas项目综合实战|Canvas图形、动画、游戏开发从入门
本书将详细讲解CSS的选择器、属性、盒模型、定位机制以及CSS3的新特性,如过渡、动画和Flexbox及Grid布局系统,使你能创建出富有层次感和动态效果的网页。 JavaScript是一种强大的客户端脚本语言,它赋予了网页交互...
CSS3选择器总结 CSS(层叠样式表)是用于控制网页样式和布局的一种技术。随着互联网的发展,CSS规范也在不断更新。CSS3作为最新版本的CSS,引入了许多新的选择器。选择器是CSS中用来指定哪些HTML元素应该被特定样式...
CSS与jQuery选择器是网页设计与开发中非常核心的技术之一。CSS选择器用于定位HTML文档中的元素,以便于对它们应用样式。而jQuery选择器则是jQuery库中用于选择和操作DOM元素的强大工具。接下来,我们将对这些选择器...
### Python爬虫之CSS选择器详解 #### 一、引言 在进行Web爬虫开发时,高效地从HTML文档中提取所需数据是一项基本而重要的技能。Python作为一门功能强大的编程语言,在网络爬虫领域有着广泛的应用。CSS选择器作为一...
CSS浮动float属性详解 在Web开发中,布局是非常重要的一方面,浮动float属性是CSS布局中非常关键的属性。通过对浮动float属性的理解和掌握,我们可以更好地实现网页的布局和排版。 Float浮动属性基本释义 float...
1. **选择器**:CSS3引入了更强大的选择器,如伪类(`:hover`, `:active`, `:focus`等)、伪元素(`::before`, `::after`)以及属性选择器,使开发者能更精确地定位和控制元素。 2. **颜色和背景**:CSS3允许使用更...