CSS3学习笔记 之 属性选择器

最新推荐文章于 2023-06-04 22:26:28 发布
最新推荐文章于 2023-06-04 22:26:28 发布
阅读量581 收藏 3
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/atleks/article/details/38966851
版权

    属性选择器可以给予元素的属性来匹配元素，CSS3还支持基于模式匹配来定位元素，属性选择器语法如下：

选择器功能描述
E[attr]选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属性的任意类型元素
E[attr=value]选择匹配具有属性attr的E元素，并且attr的属性值为val（其中val区分大小写），同样E元素省略的时表示选择定义了attr属性值为val的任意类型元素
E[attr|=val]选择匹配E元素，且E元素定义了属性attr，attr属性值是一个具有val或者以val-开始的属性值。常用于lang属性（例如lang=“en-US”）。例如p[lang=en]将匹配定义为英语的任何段落，无论是英式英语还是美式英语
E[attr~=val]将匹配E元素，且E元素定义了属性值attr，attr属性值具有多个空格分隔的值，其中一个值等于val。例如，.info[title~=more]将匹配元素具有类名info，且这个元素设置了一个属性title，同时title属性值是包含了“more”的任何元素，例如<a class="info" title="click here for more information">click me</a>
E[attr*=val]将匹配元素E，且元素E定义了属性attr，其属性值任意位置包含了val，换句话说字符串val与属性值中的任意位置相匹配
E[attr^=val]将匹配元素E，且E元素定义了属性attr，其属性值以val开头的任何字符串
E[attr$=val]选择匹配元素E，且E元素定义了属性attr，其属性值以val结尾的任何字符串，刚好与E[attr^=val]相反

浏览器兼容性：IE7+，还有所有版本的FF，Chrome，Safari，Opera都支持属性选择器。

下面使用实例来演示属性选择器的使用，首先编写入下一个简单的HTML程序：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3属性选择器的使用</title>
  <style type="text/css">
    .demo {
      width: 300px;
			border: 1px solid #ccc;
			padding: 10px;	
      overflow: hidden;
      margin: 20px auto;
		}

		.demo a {
			float: left;
			display: block;
			height: 50px;
			width: 50px;
			border-radius: 10px;
			text-align: center;
			background: #aac;
			color: blue;
      font: bold 20px/50px Arial;
			margin-right: 5px;
			text-decoration: none;
      margin: 5px;
		}
  </style>
</head>
<body>
	<div class="demo">
		<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="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
		<a href="/abc.pdf" class="links item" title="close the website" lang="en-zh">8</a>
		<a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a>
		<a href="abd.doc" class="linksitem last" id="last">10</a>
	</div>
</body>
</html>

显示效果如下：


E[attr]属性选择器

选择所有带有id属性的a元素，并且改变匹配元素的背景颜色，在上面HTML代码CSS样式部分的最后增加如下代码：

a[id] {
      background-color:yellow;
}

显示效果如下：



E[attr=val]属性选择器

指元素E设置了属性attr，并且其属性值为val，在上述html代码CSS样式的末尾增加如下代码：

a[id=first] {
    background-color: red;
}

显示效果如下：


E[attr|=val]属性选择器

选择attr属性值等于val或以val-开头的所有字符串属性的元素，在上面HTML的CSS样式后面增加如下代码：

a[lang|=zh] {
	background-color: yellow;
}

显示效果如下：



E[attr~=val]属性选择器

根据元素值中的此列表的某个词来匹配需要的元素，就可以使用这个选择器。在上面HTML页面CSS样式最后增加下面代码： 
a[title~=website] {
	background-color: green;
}

显示效果如下：

E[attr*=val]属性选择器

将匹配那些设置了attr属性，而且attr属性值中包含val字符串的元素，在上面html页面代码CSS样式最后增加如下代码： 
a[class*=links] {
	background-color: pink;
}
显示效果如下：

E[attr^=val]属性选择器

选中attr属性以val开头的所有元素，在上述HTML页面的CSS样式最后增加如下代码： 
a[href^=http] {
	background-color: crimson;
}
显示效果如下：


E[attr$=val]属性选择器

选择属性以val结尾的所有元素，在上面html代码最后增加如下代码： 
a[href$=png] {
	background-color: cyan;
}

显示效果如下：


atleks
关注
第一章 网页笔记(元素 属性 选择器)
weixin_46446530的博客
03-21 1009
HTML5语义化标签 表示页面中一个内容区块或整个页面的标题 页面中的一个内容区块（章节 页眉 页脚或页面的其他部分） 表示页面中一块与上下文不相关的独立内容（如文章） 表示标签内容之外的，与标签内容相关的辅助信息。可做文章的侧栏 表示对整个页面或页面中的一个内容区块的标题进行组合 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元 定义标签的标题 表示页面中导航链接的部分 表示整个页面...
CSS篇属性选择器 E[attr=“value“]
weixin_42497127的博客
11-22 2877
概述 属性选择器通过 [] 来定义，[] 内部为元素的属性，属性选择器的权重要高于标签选择器 标准属性：id class type src href 自定义属性：data- E[attr]只使用属性名，但没有确定任何属性值 E = Element元素 attr = 属性 属性 使用的方式 E[attr=“value”] 指定属性名，并指定了该属性的属性值 E[attr~=“value”] 指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
css选择器(E[att^=”val”]序号选择器)
daxiangya6845的博客
11-07 842
一、基本选择器序号 选择器 含义1. * 通用元素选择器，匹配任何元素2. E 标签选择器，匹配所有使用E标签的元素3. .info class选择器，匹配所有class属性中包含info的元素4. #footer id选择器，匹配所有id属性等于footer的元素实例：* { margin:0; padding:0; }p { font-size:2em; }.info { backg...
CSS3属性选择器
luotuofeile的博客
02-25 374
CSS3属性选择器 E[att^="val"] 属性att的值以"val"开头的元素。 E[att$="val"] 属性att的值以"val"结尾的元素。 E[att*="val"] 属性att的值包含"val"字符串的元素。 CSS3结构伪类选择器 :root 选择匹配文档的根元素。 E:nth-child(n) 选择所有在其父元素中的第n个位置的匹配E的子元素，odd表示奇数行，even表示偶数行 E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素
CSS选择器
m0_54202121的博客
10-04 516
一.属性选则器 1.E[att^=value]属性选择器 E[att^=value]属性选择器是指选择名称为被E标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。例如： <!doctype html> <html> <head> <meta charset="utf-8"> <title>E[att^=value]属性选择器应用</titl
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
12-10
css3特性中最令人兴奋的莫过于选择器的增强，例如属性选择器可以根据某个属性值来选择标记，位置选择器可以根据子元素的位置来选择标记。 在目前很多使用的很多浏览器，例如IE7,主要支持css2.大部分属性选择器都不...
css入门学习笔记1 基础选择器
05-25
在CSS（层叠样式表）中，选择器是用于定位HTML或XML文档中元素的关键工具。本篇将详细讲解四种基础选择器：标签选择器、类...这些基础选择器和属性是CSS入门的基础，熟练掌握它们能帮助你更好地控制网页的布局和样式。
学习CSS过程中对于基础选择器、文本属性、字体属性的一些学习笔记和理解
最新发布
11-01
CSS学习日记中，对基础选择器、文本属性、字体属性的一些学习笔记和理解。学习HTML网页知识的可以参考一下。 CSS基础选择器 根据不同需求把不同的标签选出来，简单来说就是选择标签用的。 1. 标签选择器:标签里面...
【温故知新】CSS学习笔记（后代和子代选择器）
12-21
【CSS学习笔记】深入理解后代和子代选择器 在CSS样式设计中，选择器是定位HTML或XML文档中特定元素的关键工具。除了基础的选择器，如类型选择器、类选择器、ID选择器和属性选择器，CSS还提供了后代选择器和子代选择...
CSS3选择器学习笔记代码
11-05
在CSS（层叠样式表）3版本中，选择器的引入极大地...在“CSS3选择器学习笔记代码”中，你将找到这些知识点的实例和示例代码，帮助你更好地理解和运用CSS3选择器。通过实践和调试这些代码，你的CSS技能将得到显著提升。
CSS 选择器的常见用法
达斯米奇的博客
06-04 2187
CSS 选择器的常见用法
css中属性选择器用法总结c
kbx8916的博客
12-06 701
css中属性选择器的书写方式: 1. [title] { } 2.属性和值 [title=hello] { corlor:red; } 3.用于选取属性值中包含指定词汇的元素。(注意是词汇，就是单个单词) [title~=hello]元素的属性值中包含hello词汇 { color:red } 4. [title|=en]用于选取title属
属性选择器
pyrans的博客
08-14 1125
以div与class举例 1、div[class]{属性：属性值；} 用于选取带有指定属性的元素 2、div[class="a"]{属性：属性值；} 用于选取带有指定属性和值元素 3、div[class~="a"]{属性：属性值；} 用于选取属性值中包含指定词汇的元素 4、div[class|="a"]{属性：属性值；} 用于选取指定属性以指定词汇-（注）开头，或值为该词汇的元素 ...
第六章 属性选择器
唐僧的专栏
05-13 5018
我们平常提到的 属性选择器 是指 [type = "radio"] 这类选择器，实际上 这是一种简称。 指的是 “属性值匹配选择器”； 在正式文档中: 类选择器 和 ID 选择器都属于 属性选择器。 应为本质上 类选择器 是 匹配 HTML 中 class 的属性值， ID 选择器 是 匹配 HTML 中的 Id 属性值。 ID选择器 和 类选择器 ID选择器 和 类选择器 都属于 属性选择器， 他们的身份看起来 高贵而 特殊， 毕竟 HTML 原生属性那么多， 就 id 和 class 两..
c3选择器
babyrita的博客
08-07 1869
经常记不住c3选择器，再次强化一遍。。。 1.属性选择器 语法特点：[] e[attr] 具有某属性的标签 e[attr = ""]  属性值完全等于某个值的标签 e[attr *= ""] 属性值里包含某个值的标签 e[attr ^= ""] 属性值以某个值开头的标签 e[attr $= ""] 属性值以某个值结尾的标签 2.伪类选择器（位置伪类） e:firs
HTML5+css3课后习题【一】
缘友一世的博客
11-04 8988
因为静态网页的访问速度快，所以现在互联网上的所有网站都是静态网页组成的。（✖️）大多数网页是动静混合模式。“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。（✔️ ）在Web标准中，表现是指网页展示给访问者的外在样式。（ ✔️）在网页中，层叠样式表指的是JavaScript。（✖️ ）CSS所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。（ ✖️）结果不一样。
CSS可以解决margin-right和font:bold无效的方法
weixin_44496333的博客
06-17 556
今天学习的时候，突然发现一些小问题，之后才终于找到了，解决问题的方法！ 开始代码： background: #3a2aff; text-align: center; color: red; text-decoration: none;//去下划线 margin-right:5px;//向右移动5px font:bold 20px/50px Arial; 在浏览器上发现无效，如图： 并没有分开，字体也没有居中 解决方.
jQuery CSS选择器完全笔记
于val的E元素 11. E[att~=val] 匹配所有att属性的值中包含空格分隔的单词val的E元素 12. E[att|=val] ...因此，无论是CSS2的基础选择器，还是CSS3中新增的复杂选择器，都值得开发者深入学习和掌握。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值