CSS3属性选择器特性使用详解

techbrood 发表于 2017-02-21 18:15:59

标签: css3, selector, attribute, 基础知识, 入门教程

- +

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;
}

你可以自己在线试试看

possitive(3) views4972 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 增强现实引擎ARToolKit工作原理简介

    ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;

  • 谷歌ARCore技术特性简介

    谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...

  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • A-Frame WebVR(网页虚拟现实)快速开发入门教程

    WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的

  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • 创建非矩形网页页面元素的常用技术和实例代码

    非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...

  • NodeJS、Java和PHP性能考量和若干参考结论

    首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • 更多...