第36章 CSS3中新增的属性选择器

沈宫新 2015-12-08 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
[id*=section1]{ background:#0C0;}
[id*=section2]{ background:#9C0;}
[id*=section1-1]{ background:#CF0;}
*/
[id*=section]{ background:#F03;}
[id^=s]{ background:#0Fd;}
[id^=b]{ background:#00C;}
[id*=n]{ background:#0F0;}
[id$=c]{ background:#009;}
[id$=\-1]{ background:#FF0;}
[id$=_2]{ background:#F03;}
</style>
</head>
<body>
<h1>CSS3中的属性选择器</h1>
<div id="section1a">section1a</div>
<div id="section1-1">section1-1</div>
<div id="section1-1-1c">section1-1-1c</div>
<div id="section1-1-2d">section1-1-2d</div>
<div id="section1-2e">section1-2e</div>
<div id="section1-2-1">section1-2-1</div>
<div id="bsection2">section2</div>
<div id="section2-1">section2-1</div>
<div id="section2-2">section2-2</div>
<div id="section2_2">section2_2</div>
<div id="section2_2">section2_2</div>
<div id="section2_2">section2_2</div>
<div id="section2_3">section2-3</div>
</body>
</html>

 效果图：
第36章 CSS3中新增的属性选择器
 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a[href$=php]:after{
	content:"[网站链接]";
	color:#9F3;
}
a[href$=png]:after{
	content:"[图片链接]";
	color:#3F6;	
}
</style>
</head>
<body>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
</body>
</html>

效果图：
第36章 CSS3中新增的属性选择器
 

沈宫新

沈宫新

相关推荐

06前端css3增加选择器

element[attribute=‘value‘’] 匹配所有attribute属性值为value的元素，设置样式

vavid / 0评论 2020-06-28

CSS3 选择器

简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，不仅可以是整数值，也可以是表达式和关键词，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到

somboy / 0评论 2020-06-10

web前端入门到实战：常见CSS3选择器和文本字体样式汇总

常见的CSS3选择器包含：常用基本、属性、伪类、层级（组合）选择器，具体使用情况建议先阅读[css选择器四大类：基本、组合、属性、伪类]对于选择器的使用有一个基本了解，选择器的作用在于通过它找到元素，并且给它添加属性样式。专门建立的学习Q-q-u-n： 7

WinerChopin / 0评论 2020-04-18

css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

祖先元素 后代元素{ }. 父元素>子元素{ }. 所有兄弟元素选择器。选择所有带指定属性，并且指定属性值的元素。选择所有带指定属性，并且属性以指定值结尾的元素，结尾可以是一个完整的单词，也可以是单个字母

lanzhusiyu / 0评论 2020-02-02

CSS3 选择器——伪类选择器（转）

前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过

sorryericsson / 0评论 2016-01-04

CSS3 选择器——属性选择器（转）

上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。E[attr]：只使用属

drdrsky / 0评论 2016-01-04

好程序员HTML5培训教程-总结30个CSS3选择器

好程序员HTML5培训教程-总结30个CSS3选择器1 *：通用选择器 { margin:0; padding:0; }*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。

afeichuanqi / 0评论 2019-07-01

即学即用，轻松搞定这些选择器！（下）

在上一篇文章中，我们讲到基础选择器中的元素选择器、ID选择器、类选择器。本期我们继续看一下伪类选择器、伪元素选择器、通用选择器的使用方法。伪类是指逻辑上存在、但文档树中并不存在的“幽灵”分类，通常用于给元素某些特定状态添加样式。伪类典型的应用就是为超链接添

沉着前进 / 0评论 2019-06-29

jQuery选择器的优势

今天学习了jQuery选择器，以前只是会用常用的一些，今天具体看了一下，发现还是值得好好学习的。直接通过$("")便可以获取。但是如果用jQuery就可以避免这样的麻烦，代码是：$.css;$("")获取的永远是对象

nicepainkiller / 0评论 2016-06-23

CSS3 选择器——伪类选择器（转）

前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过

cscscssjsp / 0评论 2016-01-04

CSS3 选择器——属性选择器（转）

上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，

Simagle / 0评论 2016-01-04

CSS3 :nth-child()伪类选择器

CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，

wolaizheli / 0评论 2014-10-09

Jquery选择器全总结

Jquery中的选择器完全继承了CSS的风格，利用Jquery选择器，可以非常便捷和快速的找出特定的Dom元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器，学会使用选择器是学习Jqeury的基础，Jquery的行为规则都必须在获取到元素

83493467 / 0评论 2014-08-29

CSS3属性选择器详解

上一章在《CSS3基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指

csscode / 0评论 2014-08-11

CSS3伪类选择器详解

前面花了两节内容分别在《CSS3基本选择器》和《CSS3属性选择器详解》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:

lanzhusiyu / 0评论 2014-08-11

转载--CSS3选择器--基本选择器

选择器主要是用来确定html的树形结构中的DOM元素节点。我们先来看一个常用的选择器列表图。下面我们先看看上表中基本的选择器的使用方法和其所起的作用，为了更好的说明问题，先创建一个简单的DOM结构，如下：

xuzhen0 / 0评论 2014-07-25

极客技术专题【008期】：CSS3核心技术：选择器

资 深Web前端工程师，W3CPlus创始人，目前就职于上海携程 。2010年开始从事 Drupal 主题制作工作，是 Drupal 社区团队最早成员之一。现久居上海，从事 Web 前端工作，关注移动端、CSS3、Sass等最新技术，目前正在撰写一本关于C

zengni / 0评论 2013-08-19

jquery选择器详解

jqueryObj.next;//获取jqueryObj标签的后面紧邻的一个div，nextAll获取所有。jQuery 的选择器借鉴了大量 CSS1 ~ CSS3 标准的特点，并且整理成一个强大的对象选择工具集。属性选择器jQuery 的属性选择器是其所

恋雨烟梦 / 0评论 2013-06-25

读Zepto源码之Selector模块

Selector 模块是对 Zepto 选择器的扩展，使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器。在阅读本篇文章之前，最好先阅读《读Zepto源码之神奇的$》。}判断元素是否可见。可见的标准是元素有宽或者

Cricket / 0评论 2019-06-21

jQuery选择器的的优点

jQuery选择器的的优点选择器想必大家都不陌生，今天呢，我就给大家介绍一下jQuery选择器的优点：。看完这篇文章，是不是感觉jQuery比原生的要好很多，我感觉最重要的一点还是代码少，哈哈！身为一个程序员，我感觉这样的工作氛围还是不错的，嘻嘻！

Gcalolin / 0评论 2019-06-21

CSS3 :nth-child()伪类选择器

CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:n

css教程 / 0评论 2012-12-12

CSS3选择器详解

[href*="lady.163.com"]{}/*选择href属性中包含"lady.163.com"的元素*/2.伪类选择器2.1链接伪类。a:active {color:#0000FF;} /* 正在被点击

libowen0 / 0评论 2019-06-20

CSS3学习笔记（一）：选择器

属性选择器在CSS3以前，如果需要选择选择某个/类元素的话，一般会使用id/class来进行选择，CSS3则提供了更强大的功能，可以根据元素中的某个属性，从而选中该元素。伪类选择器在CSS3以前，已经有了一些伪类选择器，如 CSS1 中的:hover、:v

jianqi / 0评论 2019-06-20

CSS3伪类选择器

CSS3的一个伪类选择器“:nth-child()”。直接匹配第number个元素。参数number必须为大于0的整数。li:nth-child{background:orange;}/*把第3个LI的背景设为橙色*/第二种：倍数写法。其中参数an中的字母

沈宫新 / 0评论 2012-06-03

css3选择器详解

选择器是CSS3中一个重要的部分，通过使用CSS3的选择器，可以提高开发人员的工作效率。在本节中，我们将为读者介绍属性选择器和伪类选择器的基本用法。在CSS3中，我们可以使用HTML元素的属性名称选择性地定义CSS样式。其实，属性选择器早在CSS2中就被引

hlfsunshine / 0评论 2012-05-31

jquery的选择器

通俗的讲, Selector选择器就是”一个表示特殊语意的字符串”. 只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回.但是如何将jQuery选择器分类让 我犯难. 因为书上的分类和jQuery官方的分类截然

81751330 / 0评论 2011-11-19

[转]jQuery选择器全解

通俗的讲,Selector选择器就是”一个表示特殊语意的字符串”.只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回.但是如何将jQuery选择器分类让我犯难.因为书上的分类和jQuery官方的分类截然不同.最后

zyb00yaonuli / 0评论 2011-09-01

高级HTML5讲师分享：CSS3 2D炫酷动效及css3选择器的用途与重要性

HTML5确实非常强大，小编之前也分享过很多基于HTML5 Canvas的动画特效。但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果？对，CSS3可以做到。2D炫酷动效是需要技术积累的，这里有4个重点大家可以着重掌握一下：。css3选择器是基于cs

hjfbluesky / 0评论 2018-10-11

jQuery学习笔记之jQuery+CSS3的浏览器兼容性

CSS3充分吸收多年了web发展的需求，吸收了很多新颖的特性。css3特性中最令人兴奋的莫过于选择器的增强，例如属性选择器可以根据某个属性值来选择标记，位置选择器可以根据子元素的位置来选择标记。在目前很多使用的很多浏览器，例如IE7,主要支持css2.大部

YUYISHARE / 0评论 2019-04-19

jQuery浏览器CSS3特写兼容实例

本文实例讲述了jQuery浏览器CSS3特写兼容的方法。分享给大家供大家参考。CSS3充分吸收多年了web发展的需求，吸收了很多新颖的特性。css3特性中最令人兴奋的莫过于选择器的增强，例如属性选择器可以根据某个属性值来选择标记，位置选择器可以根据子元素的

回忆的夏天 / 0评论 2019-04-19

jquery 选择器引擎sizzle浅析

我用jquery的大概有一年了，只知道$，其内部选择器的流程走向完全不清晰！于是看了jquery的源码，jquery用的选择器的引擎是sizzle，是jquery的作者另一开源项目，在github上面有，号称最快的dom选择器！上面说了不是很精彩的开场白，

yaasshole / 0评论 2013-02-06

CSS3的常用属性（一）

}<br />.ao{<br />text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;<br />}盒模型box-sizing： css中通过box-sizing来指定盒子

前端外刊评论 / 0评论 2018-02-01

html5知识点：CSS3新增选择器

css3选择器是在css2.0的基础上的修改创新。他增加了一些UI元素状态伪类选择器、结构伪类选择器、属性选择器等。Css3新增的这些选择器很多强大，他的出现给我们前端带来了好多便利。例如：:first-child是用来选择某个元素的第一个子元素，比如你想

前端外刊评论 / 0评论 2017-11-29

伪类选择器 E:nth-child(n)、E:nth-of-type(n)

结构伪类是css3新增的类型选择器。搞懂了这两个，基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了。简单的说两个伪类选择器的差别就在于此：E:nth-of-type只选类型为E的子元素，匹配类型之后我再看是第几个；而E:nth-child是不分类型的先选

软件设计 / 0评论 2017-05-05

CSS3 选择器

默认情况下这些表单元素的状态是enabled可用状态。

软件设计 / 0评论 2017-04-21

CSS3选择器～一看吓一跳，这么多不会

复习CSS时发现很多选择器不会，因为平时很少用到。现在干脆一不做二不修，全部温习一遍。

软件设计 / 0评论 2017-04-02

JQ基础之选择器

JQ选择器与CSS/CSS3选择器非常类似，对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器。元素选择器 $　　　　　　　　　　　　 $. 属性选择器 $　　　 　　 $ 　　 $　　 $ $

编程爱好者联盟 / 0评论 2016-12-17

CSS3选择器——基本选择器

CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。

大前端 / 0评论 2016-11-24

CSS3学习笔记1-选择器和新增属性

前言：之前自学了一些关于CSS3的知识，在学习过程中也遇到过坑，不过总算磕磕绊绊的学习完了关于CSS3的相关知识，于是最近把之前的笔记和代码整理了一下，也算是一个对CSS3知识的回顾复习吧，也希望能够对想学这方面知识的小白有所帮助。因为是各种渠道找的资料，

编程爱好者联盟 / 0评论 2016-11-16

IE8下CSS3选择器nth-child() 不兼容

div ul li:first-child{background:#ccc; }/*选取第一个li*/. div ul li:first-child+li+li{background:#ff0;}/*选取第三个li */. n 可以是数字、关键词或公式。对

编程爱好者联盟 / 0评论 2016-11-16

CSS3选择器的研究，案例

在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器，和伪类选择器，当是并没有做案例的研究，本想在那篇文章里面写，但想想如果把案例都写在那篇文章里面，对于查找来说就不是很方便，所有另开一篇来讲实例。[title~='hello']:选择属性是tit

编程爱好者联盟 / 0评论 2016-09-17

jQuery的选择器

页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。jQuery内部很多都是使用JavaS

编程爱好者联盟 / 0评论 2016-09-13