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建模技术就是为了解决...
Blender2.7给平面模型添加纹理贴图
在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...
CSS3原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...计算WebGL中的uniforms变量使用数
在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...
Three.js入门教程6 - 创建全景图和纹理
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...
Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解
要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...
Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce...SVG过滤器feColorMatrix矩阵变换效果用法详解
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...