在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。

在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：

(单击可放大)

实例展示：

html代码：

<a href="xxx.pdf">我链接的是PDF文件</a>

<a href="#" class="icon">我类名是icon</a>

<a href="#" title="我的title是more">我的title是more</a>

css代码

a[class^=icon]{

  background: green;

  color:#fff;

}

a[href$=pdf]{

  background: orange;

  color: #fff;

}

a[title*=more]{

  background: blue;

  color: #fff;

}

结果显示：

代码示例:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>属性选择器</title>

    <style>

        a[class^="column"]{background:red;}

        a[href$="doc"]{background:green;}

        a[class*="box"]{background:blue;}

    </style>

</head>

<body>

<a class="columnNews">我的背景想变成红色</a>

<a href="##" class="columnVideo">我的背景想变成红色</a>

<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>

<a href="##" class="1.doc">我的背景想变成绿色</a>

<a href="2.doc">我的背景想变成绿色</a>

<a href="3.doc">我的背景想变成绿色</a><br/>

<a  href="##" class="this is a box">我的背景想变成蓝色</a>

<a href="##" class="box1">我的背景想变成蓝色</a>

<a href="##" class="there is two boxs">我的背景想变成蓝色</a>

</body>

</html>

效果展示：

转载：http://www.imooc.com/code/693

css3-css3属性选择器的更多相关文章

  1. CSS3的属性选择器

    CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...

  2. 【CSS3】---属性选择器

    在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新 ...

  3. css3之属性选择器

    总体来看一下都有哪些选择器 1.属性选择器  1)[att*=val] 2)[att^=val] 3)[att$=val] 2.结构伪类选择器 3.UI伪类选择器 其中E:read-only伪类选择器 ...

  4. h5与c3权威指南笔记--css3新属性选择器

    [att*=val] 选择所有att属性值中包含val的.只要包含val值,不论val值在属性值的前面还是中间还是后面~ <style> div[class*=div]{ color: r ...

  5. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  6. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  7. CSS3选择器（二）之属性选择器

    CSS3选择器的第二部分——属性选择器.. 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同 ...

  8. CSS2属性选择器和css3选择器的用法和区别

    兄弟们,这是我第一次写博客,希望对进来的人有用,写的不好别喷哈,谢谢. css2属性选择器: 1.[attribute] 例子:   [title] 解释:   选择含有  title  属性的所有元 ...

  9. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  10. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

    要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...

随机推荐

  1. spring- junit测试事务回滚

    http://blog.csdn.net/molingduzun123/article/details/49383235

  2. HTML&&CSS基础知识点整理

    HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...

  3. Qt之zip压缩/解压缩（QuaZIP）

    摘要: 简述 QuaZIP是使用Qt/C++对ZLIB进行简单封装的用于压缩及解压缩ZIP的开源库.适用于多种平台,利用它可以很方便的将单个或多个文件打包为zip文件,且打包后的zip文件可以通过其它 ...

  4. Linux内核调试方法总结之内核通知链

    Linux内核通知链notifier 1.内核通知链表简介(引用网络资料)    大多数内核子系统都是相互独立的,因此某个子系统可能对其它子系统产生的事件感兴趣.为了满足这个需求,也即是让某个子系统在 ...

  5. python 每周作业

    day2:python的简介与认识day2:# 1.写一个登录程序# username# passwd# 让用户输入账号和密码,输入用户和密码输入正确的话# 提示你 xxx,欢迎登录,今天的日期是xx ...

  6. Postman + Newman 生成测试报告

    1.安装Node.js 下载地址: https://nodejs.org/download/ 2.安装Newman 1) 打开cmd,输入:npm install -g newman 2) 安装支持N ...

  7. 前端004/React常用UI组件

    每天进步一点点〜 Ant Design of React //蚂蚁金服设计平台.需要应用何种类型组件可参考API React + mobx + nornj 开发模式文件说明: [1].A.t.html ...

  8. Java基础/发起http和https请求

    Java中发起http和https请求 一般调用外部接口会需要用到http和https请求. 本案例为:前后端完全分离,前端框架(React+Mobx+Nornj),后端(Go语言). 面临问题:跨域 ...

  9. 如何判断一段程序是由C 编译程序还是由C++编译程序编译的

    以下是在论坛中看到的两种解释: (1)如果是要你的代码在编译时发现编译器类型,就判断_cplusplus或_STDC_宏,通常许多编译器还有其他编译标志宏, #ifdef __cplusplus co ...

  10. Navicat批量导出mysql的DDL语句

    工作中有的时候需要将某个库中的表.视图.函数.存储过程等创建语句导出,又不需要表中的数据.同时最好放在同一个文件里面,这样方便拷贝. 方法一:需要拷贝的创建语句条数不多,不至于让你拷到头脑发晕的地步, ...