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; }
你可以自己在线试试看。


最新评论
- 相关文章
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...前端开发框架技术选型:Angular2 VS React VS jQuery
Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...
使用HTML5 Canvas实现的界面元素截屏功能
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
纹理基础知识和过滤模式详解
1、 为什么在纹理采样时需要texture filter(纹理过滤)。
我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解
我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...
Three.js入门教程6 - 创建全景图和纹理
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...
SVG过滤器feColorMatrix矩阵变换效果用法详解
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...
更多...