CSS篇属性选择器 E[attr=“value“]

最新推荐文章于 2024-04-29 13:37:01 发布
最新推荐文章于 2024-04-29 13:37:01 发布
阅读量2.7k 收藏 5
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42497127/article/details/121469042
版权

概述

属性选择器通过 [] 来定义，[] 内部为元素的属性，属性选择器的权重要高于标签选择器

标准属性：id class type src href
自定义属性：data-
E[attr]只使用属性名，但没有确定任何属性值
E = Element元素
attr = 属性

属性使用的方式
E[attr=“value”]指定属性名，并指定了该属性的属性值
E[attr~=“value”]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
E[attr^=“value”]指定了属性名，并且有属性值，属性值是以value开头的
E[attr$=“value”]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*=“value”]指定了属性名，并且有属性值，而且属值中包含了value
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div, p, h3{
				height: 50px;
				margin: 0 0 10px 0;
				background-color: pink;
				color: #fff;
				font-size: 24px;
				text-indent: 20px;
			}
			h3[data-user]{
				background-color: palegreen;
			}
		</style>
	</head>
	<body>
		<div data-user="1">1</div>
		<p data-user="2">2</p>
		<h3 data-user="3">3</h3>
		<div data-user="4">4</div>
		<div data-user="5">5</div>
		<div data-user="6">6</div>
	</body>
</html>

E[attr=“value”]

E[attr=“value”]指定属性名，并指定了该属性的属性值
加wx wzq85006194

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			加wx   wzq85006194
		-->
		<style>
			div, p, h3{
				height: 50px;
				margin: 0 0 10px 0;
				background-color: pink;
				color: #fff;
				font-size: 24px;
				text-indent: 20px;
			}
			body [data-user="1"]{
				background-color: palegreen;
			}
		</style>
	</head>
	<body>
		<div data-user="1">1</div>
		<p data-user="2">2</p>
		<h3 data-user="3">3</h3>
		<div data-user="4">4</div>
		<div data-user="5">5</div>
		<div data-user="6">6</div>
	</body>
</html>

E[attr~=“value”]

E[attr~=“value”]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写 加wx wzq85006194

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			加wx   wzq85006194
		-->
		<style>
			div, p, h3{
				height: 50px;
				margin: 0 0 10px 0;
				background-color: pink;
				color: #fff;
				font-size: 24px;
				text-indent: 20px;
			}
			body [data-type~="chi"]{
				background-color: palegreen;
			}
		</style>
	</head>
	<body>
		<div data-user="123" data-type="chi shui coding">1</div>
		<p data-user="234" data-type="shui coding">2</p>
		<h3 data-user="345" data-type="coding">3</h3>
		<div data-user="456" data-type="chi shui">4</div>
		<div data-user="5" data-type="chi coding">5</div>
		<div data-user="6" data-type="chi shui coding">6</div>
	</body>
</html>

E[attr^=“value”]

E[attr^=“value”]指定了属性名，并且有属性值，属性值是以value开头的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title> 
		<style>
			div, p, h3{
				height: 50px;
				margin: 0 0 10px 0;
				background-color: pink;
				color: #fff;
				font-size: 24px;
				text-indent: 20px;
			}
			body [data-type^="sa"]{
				background-color: palegreen;
			}
		</style>
	</head>
	<body>
		<div data-user="123" data-type="chi">1</div>
		<p data-user="234" data-type="shui">2</p>
		<h3 data-user="345" data-type="coding">3</h3>
		<div data-user="456" data-type="chishui">4</div>
		<div data-user="5" data-type="coding">5</div>
		<div data-user="6" data-type="shuicoding">6</div>
	</body>
</html>

E[attr$=“value”]

E[attr$=“value”]指定了属性名，并且有属性值，而且属性值是以value结束的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title> 
		<style>
			div, p, h3{
				height: 50px;
				margin: 0 0 10px 0;
				background-color: pink;
				color: #fff;
				font-size: 24px;
				text-indent: 20px;
			}
			body [data-type$="ing"]{
				background-color: palegreen;
			}
		</style> 
	</head>
	<body>
		<div data-user="123" data-type="chi">1</div>
		<p data-user="234" data-type="shui">2</p>
		<h3 data-user="345" data-type="coding">3</h3>
		<div data-user="456" data-type="chishui">4</div>
		<div data-user="5" data-type="coding">5</div>
		<div data-user="6" data-type="shuicoding">6</div>
	</body>
</html>

E[attr*=“value”]

E[attr*=“value”]指定了属性名，并且有属性值，而且属值中包含了value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	 
		<style>
			div, p, h3{
				height: 50px;
				margin: 0 0 10px 0;
				background-color: pink;
				color: #fff;
				font-size: 24px;
				text-indent: 20px;
			}
			body [data-type*="c"]{
				background-color: palegreen;
			}
		</style> 
	</head>
	<body>
		<div data-user="123" data-type="chi">1</div>
		<p data-user="234" data-type="shui">2</p>
		<h3 data-user="345" data-type="coding">3</h3>
		<div data-user="456" data-type="chishui">4</div>
		<div data-user="5" data-type="coding">5</div>
		<div data-user="6" data-type="shuicoding">6</div>
	</body>
</html>

E[attr|=“value”]

E[attr|=“value”]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn） 加wx wzq85006194

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			加wx   wzq85006194
		-->
		<style>
			div, p, h3{
				height: 50px;
				margin: 0 0 10px 0;
				background-color: pink;
				color: #fff;
				font-size: 24px;
				text-indent: 20px;
			}
			body [data-type|="chi"]{
				background-color: palegreen;
			}
		</style>
	</head>
	<body>
		<div data-user="123" data-type="chi-fan">1</div>
		<p data-user="234" data-type="shui-jiao">2</p>
		<h3 data-user="345" data-type="chicoding">3</h3>
		<div data-user="456" data-type="chi-shui">4</div>
		<div data-user="5" data-type="coding">5</div>
		<div data-user="6" data-type="shui-coding">6</div>
	</body>
</html>
王先生6666
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第一章 网页笔记(元素 属性 选择器)
weixin_46446530的博客
03-21 979
HTML5语义化标签 表示页面中一个内容区块或整个页面的标题 页面中的一个内容区块（章节 页眉 页脚或页面的其他部分） 表示页面中一块与上下文不相关的独立内容（如文章） 表示标签内容之外的，与标签内容相关的辅助信息。可做文章的侧栏 表示对整个页面或页面中的一个内容区块的标题进行组合 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元 定义标签的标题 表示页面中导航链接的部分 表示整个页面...
CSS3 选择器 属性选择器介绍
12-13
使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。 从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种： E[attr]：只...
4.[attribute!=value]属性选择器
weixin_34183910的博客
03-10 194
与上一节介绍的[attribute=value]属性选择器正好相反，[attribute!=value]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。 例如，使用[attribute!=value]属性选择器，获取指定不包含属性名，或与属性名和对应值不同的全部<li...
CSS属性选择器的7个常见用法！
最新发布
u013179804的博客
04-29 1080
属性选择器是 CSS 中一种强大的选择器，它允许我们根据元素的属性及属性值来选择特定的元素，从而实现精准的样式控制。它主要的应用场景是，为表单字段设置统一样式、模块化CSS以避免命名冲突、标识表单控件的不同交互状态、定制多语言环境下的文本展示、响应不同媒体查询条件等。好，那我们一起来看看它的 7 个常见用法吧。
CSS3 [attribute^=value] 选择器
excellentchen的博客
05-24 968
定义和用法The [attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。实例设置class属性值以"test"开头的所有元素的背景颜色：[class^="test"]{background:#ffff00;}...
jquery属性过滤选择器[attr=value]、[attr!=value]、[attr^=value]、[attr$=value]、[attr*=value]、[attr|=value]
Bel_Ami_n的博客
01-22 623
jquery属性过滤选择器[attr=value]、[attr!=value]、[attr^=value]、[attr$=value]、[attr*=value]、[attr|=value]。 jquery属性过滤选择器 jquery属性过滤选择器，包括[attr]、[attr=value]、[attr!=value]、[attr^=value]、[attr$=value]、[attr*=valu...
【JQuery】[attribute=value]属性选择器
O(∩_∩)O
03-28 914
获取与属性名和属性值完全相同的全部元素. 其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值，value两边可以不加引号的。 用例子一目了然。 改变"title"属性值为"蔬菜"的背景色 茄子 香蕉 芹菜 苹
JSoup CSS选择器用法大全
08-15
- `E ~ F`: 选择器 `E` 后面跟着一个或多个选择器 `F` 的元素，但不是紧邻的同级元素。 在爬虫开发中，利用这些 CSS 选择器，可以精准地定位到目标网页上的特定元素，从而提取所需信息。例如，`a[href^='http:']` ...
JQuery中属性过滤选择器用法实例分析
12-03
在jQuery中，属性过滤选择器是一种强大的工具，用于根据元素的特定属性或其值来定位DOM中的元素...在jQuery库中，这些选择器与CSS选择器相结合，提供了丰富的DOM查询能力，使得前端开发者能够更加灵活地操纵页面元素。
jQuery选择器之属性筛选选择器用法详解
12-02
在这么多属性选择器中[attr=”value”]和[attr*=”value”]是最实用的 [attr=”value”]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type=”text”],input[type=”checkbox”]等 [attr*=”...
CSS 属性赋值
weixin_33756418的博客
08-28 793
原文：https://zhictory.github.io/bl... 文档树上的每个元素的 CSS 属性值会涉及到以下四种值： Specified values 指定值 Computed values 计算值 Used values 应用值 Actual values 实际值 实际值应该就是我们平时看到的最终值，关于最终值的计算，...
css选择器(E[att^=”val”]序号选择器)
daxiangya6845的博客
11-07 824
一、基本选择器序号 选择器 含义1. * 通用元素选择器，匹配任何元素2. E 标签选择器，匹配所有使用E标签的元素3. .info class选择器，匹配所有class属性中包含info的元素4. #footer id选择器，匹配所有id属性等于footer的元素实例：* { margin:0; padding:0; }p { font-size:2em; }.info { backg...
属性选择器
热门推荐
无区新手的博客
05-09 1万+
1.E[att^=value]属性选择器     E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。例如，div[id^=section]表示匹配包含id属性，且id属性值是以“section”字符串开头的div元素。 &lt;!doctype...
val() attr('value')
weixin_34072857的博客
11-18 341
val() 只能更改输入框内的值，能更改value属性， 在浏览器中体现不出value被改变 attr('value') 都可以 谷歌浏览器 val，attr都能获取输入框最新的value值 转载于:https://www.cnblogs.com/znsongshu/p/6079384.html...
CSS3属性选择器之：教你区分E[attr*=val]和E[attr~=val]的使用方法
EmotionComputer
02-20 2816
在CSS3属性选择器中，E[attr*=val]和E[attr~=val]是很容易混淆的，举个栗子： &lt;style type="text/css"&gt; .demo{ width: 300px; border:1px solid #ccc; padding: 10px; overflow: hidden; margin: 20 auto; } .demo a { float: ...
CSS3学习笔记 之 属性选择器
@LeX
09-01 561
属性选择器可以给予元素的属性来匹配元素，CSS3还支持基于模式匹配来定位元素，属性选择器语法如下： 选择器 功能描述 E[attr] 选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属性的任意类型元素 E[attr=value] 选择匹配具有属性attr的E元素，并且attr的属性值为val（其中val区分大小写），同样E
[attribute|=value]和[attribute^=value]选择器区别
weixin_30820077的博客
08-21 230
1、[attribute|=value] [attribute|=value]选择器说明：http://www.w3school.com.cn/cssref/selector_attribute_value_start.asp 选择 lang 属性值以 "val" 开头的元素 该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。 [a...
属性选择器(CSS选择器）
dongbo2355的博客
08-24 414
属性选择器是通过标签的属性来匹配元素，使用中概括号进行标识。 为了方便观看，把css代码写入html页当中。 现在通过title这个属性来选择这个页面所有的带有title属性的标签。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"&...
CSS选择器优先级与实战练习解析
练习部分则设计了不同级别的任务，帮助学习者逐步掌握这些概念，从理解到应用，提升对CSS选择器和样式的优先级的熟练度。例如，练习1关注五种选择器的使用，练习2强调样式优先级的理解，练习3和4涉及`display`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值