文档章节

css选择器-属性选择器

指尖残雪
 指尖残雪
发布于 2016/05/22 23:56
字数 2702
阅读 7
收藏 0
点赞 2
评论 0

转载自:http://www.w3cplus.com/css3/attribute-selectors

CSS3的属性选择器主要包括以下几种:

  1.  E[attr]:只使用属性名,但没有确定任何属性值;
  2.  E[attr="value"]:指定属性名,并指定了该属性的属性值;
  3.  E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写;
  4.  E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
  5.  E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
  6.  E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
  7.  E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);

为了更好的说明CSS3属性选择器的使用方法,我们把第一节的demo换成别的结构,如下所示:

<div class="demo clearfix">
				<a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
				<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
				<a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
				<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
				<a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
				<a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
				<a href="" class="links item" title="open the website" lang="cn">7</a>
				<a href="" class="links item" title="close the website" lang="en-zh">8</a>
				<a href="" class="links item" title="http://www.sina.com">9</a>
				<a href="" class="links item last" id="last">10</a>
			</div>

初步美化一下上面的代码

.demo {
				width: 300px;
				border: 1px solid #ccc;
				padding: 10px;			
			}

		 	.demo a {
				float: left;
				display: block;
				height: 20px;
				line-height: 20px;
				width: 20px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				text-align: center;
				background: #f36;
				color: green;
				margin-right: 5px;
				text-decoration: none;
			}

最初效果如下所示:

下面就开始针对上面列出的每个属性选择器来,具体分析其使用方法。

一、E[attr]

E[attr]属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素,而不论这个属性值是什么,你就可以使用这个属性选择器,如:

.demo a[id] {background: blue; color:yellow;font-weight:bold;}

上面代码所表示的,选择了div.demo下所有带有id属性的a元素,并在这个元素上使用背景色为兰色,前景色为黄色,字体加粗的样式,对照上面的html,我们不难发现,只有第一个和最后一个链接使用了id属性,所以选中了这两个a元素,效果如下所示:

上面是单一属性的使用,你也可以使用多属性进行选择元素,如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中:

.demo a[href][title] {background: yellow; color:green;}

不用我说,上面的代码大家都知道是什么意思了,他表示的是选择div.demo下的同时具有href,title两个属性的a元素,并且应用相对应的样式,如下所示:

IE6不支持这个选择器。

二、E[attr="value"]

E[attr="value"]选择器和E[attr]选择器,从字面上就能很清楚的理解出来,E[attr="value"]是指定了属性值“value”,而E[attr]只是选择了有对应的属性,并没有明确指其对应的属性值"value",这也是这两种选择器的最大区是之处。从而缩小了选择 围,更能精确选择自己需要的元素,在前面实例基础上我们进行一下简单的修改:

.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}

和前面代码相比较,此处在id的属性基础上指定了相应的value值为“first”,这样一来我们选中的是div.demo中的a元素,并且这个元素有一个"id="first""属性值,请看下在的效果图:

E[attr="value"]属性选择器也可以多个属性并写,进一步缩小选择范围:

.demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;}

效果如下:

对于E[attr="value"]这种属性值选择器有一点需要注意:属性和属性值必须完全匹配,特别是对于属性值是词列表的形式时,如:

<a href="" class="links item" title="open the website">7</a>

例如上面的代码,如果你写成:

.demo a[class="links"]{color:red};/*这是一种写法不能和上面的html所匹配*/

上面的属性选择器并不会和上在的html匹配,因为他们的属性和属性值没有完全匹配,需要改成如下所示的代码,才能正确匹配:

.demo a[class="links item"]{color:red};/*这样才是匹配的,记得中间的空格不能少的哟*/

IE6浏览器不支持这种选择器。

三、E[attr~="value"]

如果你想根据属性值中的词列表的某个词来进行选择元素,那么就需要使用这种属性选择器:E[attr~="value"],这种属性选择器是属性值是一个或多个词列表,如果是列表时,他们需要用空格隔开,只要属性值中有一个value相匹配就可以选中该元素,而我们前面所讲的E[attr="value"]是属性值需要完全匹配才会被选中,他们两者区别就是一个有“〜”号,一个没有“〜”号。我们来看一个这方面的实例:

.demo a[title~="website"]{background:orange;color:green;}

上面代码表示的是,div.demo下的a元素的title属性中,只要其属性值中含有"website"这个词就会被选择,回头看看我们的html,不难发现所有a元素中“2,6,7,8”这四个a元素的title中都含有,所以被选中,请看效果:

如果我们在上面的代码中,把那个“〜”号省去,大家看看他们不同之处:

.demo a[title="website"]{background:orange;color:green;}

这样将不会选择中任何元素,因为在所有a元素中无法找到完全匹配的"title='website'",换句话说就没有选中任何元素,效果如下:

这个实例再次证明了E[attr="value"]和E[attr~="value"]之间的区别,和其中“〜”所取的作用,我总结了一句话:属性选择器中有波浪(〜)时属性值有value时就相匹配,没有波浪(〜)时属性值要完全是value时才匹配。

IE6不支持E[attr~="value"]属性选择器。

四、E[attr^="value"]

E[attr^="value"]属性选择器,指的是选择attr属性值以“value”开头的所有元素,换句话说,选择的属性其以对应的属性值是以“value”开始的,一起来看个实例:

.demo a[href^="http://"]{background:orange;color:green;}
			.demo a[href^="mailto:"]{background:green;color:orange;}

上面代码表示的是选择了以href属性,并且以"http://"和"mailto:"开头的属性值的所有a元素,换过更简单一点的呢?只要a元素中的href属性值是以"http://"或"mailto:"开头的a元素都会以选中,那么下面大家请对照上面的html和下面的效果图,看看是不是那么一回事:

IE6不支持E[attr^="value"]选择器。

五、E[attr$="value"]

E[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反,E[attr$="value"]表示的是选择attr属性值以"value"结尾的所有元素,换句话说就是选择元素attr属性,并且他的属性值是以value结尾的,这个运用在给你一些特殊的链接加背景图片很方便的,比如说给pdf,png,doc等不同文件加上不同icon,我们就可以使用这个属性来实现,如:

.demo a[href$="png"]{background:orange;color:green;}

上面代码表示的是,选择div.demo中元素有href属性,并以png值结尾的a元素。(正如上面所说,只不过这里使用的是改变元素的背景色),效果如下:

IE6不支持E[attr$="value"]属性选择器。

六、E[attr*="value"]

E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。也就是说,只要你所选择的属性,其属性值中有这个"value"值都将被选中,如:

.demo a[title*="site"]{background:black;color:white;}

上面代码表示的是:选择了div.demo中a元素,而a元素的title属性中只要有"site"就符合选择条件。效果如下:

IE6不支持E[attr*="value"]选择器。

七、E[attr|="value"]

E[attr|="value"]是属性选择器中的最后一种,在说这个选择器使用之前先提醒大家attr后面的是一个竖线“|”而不是l,小心搞错了。E[attr|="value"]被称作为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的所有元素,我们来看个实例:

.demo a[lang|="zh"]{background:gray;color:yellow;}

上面的代码会选中了div.demo中lang属性等于zh或以zh-开头的所有a元素,大家可以对照前面的html代友,其中"2,3,4,6"被选中,因为他们都有一个lang属性,并且他们的属性值都符合以"zh"或"zh-"开始的元素。具体效果如下:

所以这种属性选择器用来匹配以“女value-1”,"value-2"的属性是很方便的,比如说你页面中有很多图片,图片文件名都是以"figure-1","figure-2"这样的方式来命名的,那么使用这种选择器选中图片就很方便了,大家可以在本地尝试一下,这种属性选择器最常常用的地方是如上面的示例用来匹配语言。

IE6不支持E[attr|="value"]选择器。

有关于属性选择器就上面这些内容了,属性选择器除了IE6不支持外,其他的浏览器都能支持,这样一来,如果你在你的页面上使用了属性选择器,而且你需要处理ie6兼容问题,那你就需要确保IE6用别的方法来实现或者你应该确保IE6用户将能获得一个可用的页面。七种属性选择器中E[attr="value"]和E[attr*="value"]是最实用的,其中E[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等,而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件,比如说你的网站上不同的文件类型的链接需要使用不同的icon图标,用来帮助你的网站提高用户体验,就像前面的实例,可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。

本文转载自:http://blog.csdn.net/bq1073100909/article/details/46585385

共有 人打赏支持
指尖残雪
粉丝 7
博文 73
码字总数 0
作品 0
上海
后端工程师
CSS 选择器[上]

选择器总汇 基本选择器 符合选择器 伪元素选择器 目前CSS选择器的版本已经升级至第三代,即CSS3选择器。CSS3选择器提供了更多、更丰富的选择器方式,主要分为三大类。 一、选择器总汇 三种选...

xiaoxiaobukuang
2017/10/19
0
0
CSS 选择器[下]

伪类选择器总汇 结构性伪类选择器 UI伪类选择器 动态伪类选择器 其他伪类选择器 一、伪类选择器汇总 伪类选择器分为四种类型:结构性伪类、UI伪类、动态伪类和其他伪类选择器。 二、结构性伪...

xiaoxiaobukuang
2017/10/23
0
0
Hybird App之选择器详解(二)

Hybird App之选择器详解(一) 学习混合app开发,要学会一些基础才能上手。本文主要介绍ID选择器、属性选择器、后代选择器、子元素选择器,其中ID选择器和属性选择器较为常用 ID选择器详解 1、...

Dwyane_Coding
01/01
0
0
css(表现层)Cascading Style Sheets层叠样式表

HTML:===> 结构层 css:===> 表现层 js:===> 行为层 css的常用三种类型选择器: 1、基本选择器: id class 标签 * 逗号选择器(,) 2、包含选择器: 子代选择器(>) 后代选择器(空格) ...

AAA年华
2017/12/09
0
0
你应该知道的一些事情——CSS权重

本文由99根据Vitaly Friedman的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英...

石佛慈悲
2013/12/05
0
0
CSS简单理解与应用

一、CSS基本概念: CSS——级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。 CSS能够对 HMTL 中的对象的位置排版进...

白志华
2015/10/18
15
0
CSS入门级学习

css入门学习 1:认识CSS   1.1:css简介,css全称是层叠样式表,Cascading style sheets   1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等 ...

别叫小伙
2016/08/17
0
0
java(十六) CSS

CSS CSS是层叠样式表(Cascading Style Sheets),用来定义网页的实现效果,可以解决html代码 对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的现实效果功能。 简单说:css...

一只小恶狼
2017/08/16
0
0
浅谈CSS 选择器

A 标签HTML 选择器 body{ padding:0px; margin:0px; background-color:#ffdee0; } B 类别CLASS 选择器 <style type="text/css"> .hongkong{ color:blue; } .hunang{ color:red; } </style> ......

五大三粗
2015/09/01
63
0
Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观的多样性。作一个形象的比喻:对于一个...

爱吃西瓜的番茄酱
2017/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Call to undefined function Workerman\posix_getpid

workerman 在centos下报PHP Fatal error: Call to undefined function Workerman\posix_getpid posix在下面这个包中php-process...

dragon_tech
4分钟前
0
0
mysql 7.4 创建表 时  所建表 字段太多 导致失败

报错:[Err] 1118 - Row size too large (> 8126). Changing some columns to TEXT or BLOB may help. In current row format, BLOB prefix of 0 bytes is stored inline. 解决方法:把表的引......

qimh
7分钟前
0
0
语法补漏

1.if...elif...else... 代码示例: test=10 if test>9: print(1) elif test>8: print(2) elif test>7: print(3) else: print('nothing') 输出代码: 1...

十年磨一剑3344
7分钟前
0
0
Python -re模块及正则表达式解析

传送门: https://blog.csdn.net/pipisorry/article/details/25909899 ps:上面文章中"命名分组"的语法格式不能执行。正确的如下: (?P<name>正则表达式) #name是一个合法的标识符 除了使用别名...

一口今心
14分钟前
0
0
mybatis中session.getMapper方法源码分析

0开始代码AuthorMapper mapper = session.getMapper(AuthorMapper.class); 1 DefaultSqlSession类 @Override public <T> T getMapper(Class<T> type) { //最后会去调用MapperRegistry.getMap......

writeademo
23分钟前
1
0
spring cloud zuul网关的作用

zuul一般有两大作用,1是类似于Nginx的网址重定向,但zuul的重定向的一般是整个spring cloud里在Eureka注册中心的模块. zuul: ignored-services: '*' sensitiveHeaders: routes: ...

算法之名
23分钟前
9
0
java按比例之原图生成缩略图

package com.wxp.test; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import javax.imageio.ImageIO; import sun.......

恋码之子
33分钟前
1
0
SpringCloud 微服务 (十五) 服务容错 Hystrix

壹 工作中的微服务架构,某个服务通常会被多个服务调用或者多层调用完成需求,如果某个服务不可用,导致一个系统功能不可用或者服务直接没用了的情况,这种情况称为雪崩效应 有A服务调用B服务,B服...

___大侠
35分钟前
1
0
Spring框架中的设计模式(五)

Spring框架中的设计模式(五) 通过以前的4篇文章,我们看到Spring采用了大量的关于创建和结构方面的设计模式。本文将描述属于行为方面的两种设计模式:命令和访问者。 前传: Spring框架中的...

瑞查德-Jack
37分钟前
1
0
解决phpstorm运行很卡问题!

phpStorm一旦达到这个临界值,所有智能提示、自动补全都失效了 这TM就很尴尬了,顿时感觉自己就是个废人了,纯手写代码跟便秘一样 众所周知phpStorm基于JAVA,那么这个内存限制肯定跟JAVA的虚...

sjcehui2010
40分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部