CSS3属性选择器特性使用详解
CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。
属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独的属性,比如[type],或者可以是一个属性和取值的组合,比如[type=checkbox] 或 [for="email"]。
我们也可以用属性选择器来匹配属性存在与否以及子字符串。例如,我们可以在空格分隔开的列表中匹配属性值,或者我们可以匹配以字符串tel:开始的属性值。我们甚至可以匹配带连字符的属性值如en-US。其中连字符匹配和空格分隔属性值列表匹配早在CSS2中已有定义。
CSS3的增强在于添加了部分(partial)匹配规则。本篇将着重介绍新引入的属性选择器(Attribute selectors)使用方法。
部分匹配
使用全属性值来匹配是很常用的方法,不过在CSS3中我们可以使用部分匹配,语法格式是:
[att~=val]
这里att代表属性,val代表空格分隔开来的属性值列表中的某一个值。波浪线~表示部分匹配的语义。
比如:
<a href="http://techbrood.com/" class="html5 friends">techbrood</a>
我们可以使用[class~=friends]来匹配上述的a元素:
a[class~=friends] { font-size: 2em; background: #eee; padding: 4px; text-decoration: none; border-bottom: 3px solid #ccc; }
以上方法适用于rel,data-*等以空格区分开来的属性值列表。
连字符匹配
对于类似en-US以连字符(-)连接起来的属性值,我们可以使用[attr|=val]来匹配。
比如以下HTML代码:
<article class="techbrood"> <h3>techbrood lastest articles</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p> </article> <article class="techbrood-html5"> <h3>techbrood latest articles on html5</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p> </article> <article class="techbrood-css3"> <h3>techbrood latest articles on css3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p> </article>
我们可以使用[class|=techbrood]来匹配上面的3个article元素:
[class|="techbrood"] {border-top: 5px solid #4caf50;color: #555;line-height: 1.3;padding-top: .5em;}
子字符串匹配
我们还可以通过子字符串来匹配属性值,有点类似于正则表达式:
^= | $= | *= |
从头部匹配 | 从尾部匹配 | 包含某子字符串 |
比如下面的html代码:
<a href="tel:+13588888888">Call techbrood online support</a>
我们可以使用如下代码来匹配:
[href^="tel:"] { background: #2196f3; }
或者:
[href*="5888"] { background: #2196f3; }
你可以自己在线试试看。
最新评论
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
HTML5动画背后的数学2 - 仿生智能算法综述
纹理基础知识和过滤模式详解
1、 为什么在纹理采样时需要texture filter(纹理过滤)。
我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...
Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
如何使用纯CSS3实现一个3D泡沫
要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...