HTML基础选择器之属性选择器的基本介绍

已于 2022-09-01 22:37:23 修改
阅读量1.9k 收藏 20
点赞数 17
文章标签： css3 html 前端 css 服务器
于 2022-07-12 19:03:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tea_tea_/article/details/125749300
版权

🤞 点击可跳转个人主页

🐱‍🏍发现的一个宝藏网站

😁💋给兄弟们安利一个最近发现的很好刷题学习网站，上面包含了很多东西，有面试相关的题目，各厂的大题，还有学习的知识点，甚至还有专项练习 ,是一个很值得我们去练习刷题的好网站点击我就可以到哦

 

目录

第一步：我们先写一个框架

第二步：然后我们先来认识一下有属性选择器都有哪些

        1.[属性名]{}，接下来给大家进行演示

        2. [属性名=属性值]{} ，接下来继续给大家进行演示

        第三种： [属性名^=属性值]{}，继续演示

        第四种： [属性名$=属性值]{}，继续演示

        第五钟：[属性名*=属性值]{}，继续演示

第一步：我们先写一个框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

第二步：然后我们先来认识一下有属性选择器都有哪些

        1.[属性名]{}，接下来给大家进行演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		[id]{
			color: red;
		}
	</style>
	<body>
		<p id="first">一</p>
		<p class="first">二</p>
		<p id="two">三</p>
		<p>四</p>
		<p>五</p>
		<p>六</p>
	</body>
</html>

 由此可见，因为我们这里写的是属性选择器，只要p标签中有一个含id，那么就会被选择到

        2. [属性名=属性值]{} ，接下来继续给大家进行演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		[id]{
			color: red;
		}
		
		[id=two]{
			background-color: brown;
		}
	</style>
	<body>
		<p id="first">一</p>
		<p class="first">二</p>
		<p id="two">三</p>
		<p>四</p>
		<p>五</p>
		<p>六</p>
	</body>
</html>

一样的道理我们可以看见这里我们设置的是 [id=two] ，有且只有id属性且属性值为two的才可以被选择到

        第三种： [属性名^=属性值]{}，继续演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		[id]{
			color: red;
		}
		
		[id=two]{
			background-color: brown;
		}
		 [id^=t]{
			 font-size: 50px;
		 }
		 
		 
	</style>
	<body>
		<p id="first">一</p>
		<p class="first">二</p>
		<p id="two">三</p>
		<p id="three">四</p>
		<p>五</p>
		<p>六</p>
	</body>
</html>

同样我们可以看到我们这里设置的是[id^=t] ，这个代表的意思是元素中有id属性，并且id值是由t开头才可以被选择到

        第四种： [属性名$=属性值]{}，继续演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		[id]{
			color: red;
		}
		
		[id=two]{
			background-color: brown;
		}
		 [id^=t]{
			 font-size: 50px;
		 }
		 
		 [class$=t]{
				background-color: blue;
		 }
		 
		 
	</style>
	<body>
		<p id="first">一</p>
		<p class="first">二</p>
		<p id="two">三</p>
		<p id="three">四</p>
		<p>五</p>
		<p>六</p>
	</body>
</html>

这里我们添加的是[class$=t] ，这个代表的意思是p标签有class属性，并且class属性的值是以t结尾，才可以被选择到 

        第五钟：[属性名*=属性值]{}，继续演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		[id]{
			color: red;
		}
		
		[id=two]{
			background-color: brown;
		}
		 [id^=t]{
			 font-size: 50px;
		 }
		 
		 [class$=t]{
				background-color: blue;
		 }
		 
		 [class*=rst]{
			 float: right;
		 }
		
	</style>
	<body>
		<p id="first">一</p>
		<p class="first">二</p>
		<p id="two">三</p>
		<p id="three">四</p>
		<p id="toprightfirst">五</p>
		<p class="firsttwo">六</p>
	</body>
</html>

这里我们添加的是  [class*=rst] ，这个代表的意思是p标签具有class属性，并且class属性的值中含有rst ，才可以被选择到

                                                以上就是对属性选择器的相关介绍 

Tea-pd
关注
  • 17
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
HTML 选择器：提高网页开发效率的利器
a451319296的博客
05-12 3784
HTML 选择器是一种用于查找特定元素的语法，根据标签名、类名、ID 等属性来筛选出符合条件的元素。在开发过程中，灵活运用各种选择器可以帮助我们更加高效地操作页面元素。本文总结了常用的HTML选择器，并提供了相关使用案例和注意事项。通过熟练掌握这些选择器的使用方式，能够提高网页开发效率，并使代码更加规范化、易于维护。
CSS3 选择器 属性选择器介绍
12-13
属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。 从上一节展示的CSS...
jQuery选择器之属性筛选选择器用法详解
12-02
在这么多属性选择器中[attr=”value”]和[attr*=”value”]是最实用的 [attr=”value”]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type=”text”],input[type=”checkbox”]等 [attr*=”value”]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link r
css属性选择器总结
qwguo
03-18 872
css 属性选择器总结
HTML-选择器
m0_73595197的博客
03-28 2426
id属性是唯一的，class不唯一四种选择器的优先级：id>class>标签>通配符。
HTML选择器 基本选择器 层次选择器 属性选择器 交集选择器 并集选择器
wlc763676wlc的博客
09-11 271
HTML选择器 基本选择器 层次选择器 属性选择器 交集选择器 并集选择器
HTML——选择器总结（直观 一目了然）
weixin_68917948的博客
03-31 5402
看了就会的css选择器的总结与使用，简单，直观
【CSS】属性选择器
热门推荐
luckyboy!的博客
08-20 1万+
属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的五种用法。
CSS3 - 属性选择器使用详解
ShenWangNian的博客
04-09 4080
（1）选择指定 class 属性值为“class”的任意类型的任意多个元素。选择匹配的 F 元素，且匹配的 F 元素被包含在匹配的 E 元素内。这里 F 不管是 E 元素的子元素或者是孙元素，都将被选中。其中 n 可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）。（1）如果父元素下的子元素类型都是一样的，那么上面的 *type 和 *child 选择器使用起来效果是一样的。其中 n 同样可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）。
CSS基础笔记五。属性选择器（属性里面选择元素的值，有开头，结尾，包含，和固定值等选择）
qq_55006020的博客
06-28 1329
1，基础选择器（全局*， 元素， id#， 类.， 合并，）2，关系选择器（后代空格，子代大于，相邻兄弟加号，通用兄弟波浪号）3，伪类选择器（鼠标的四种状态爱恨类别（link，visted，hover，active），列表的多种选择（first-child，last-child，nth-child（n/odd/even）），容器内为空（empty）/唯一（only-child）/除了某个（not（元素）），元素为焦点的时候（focus），多选和复选增强（checked））
html选择器
菜鸡的博客
06-06 1560
基本选择器 : 网页选择器核心标签选择器: 直接拿标签名作为选择器的名字使用作用: 当前网页中所有该标签都有效ID选择器: 一个网页中指定一个效果只能用一次写法: 给标签加id="值",#值{声明};类选择器:指定一个样式可以多次使用写法:给标签加class="值", . 值{声明};
CSS中所有选择器详解
杨杨吖的博客
08-04 3731
作用：通过id属性值，找到页面中带有这个id属性值的标签，并设置样式。作用：通过类名，找到页面中所有的带有这个类名的标签，并设置样式。作用：通过标签名，找到页面中所有的这类标签，并设置样式。作用：找到页面中所有的标签，然后设置样式。作用：选中页面中同时满足多个选择器的标签。作用：同时选择多组标签，设置相同的样式。作用：选中含有指定属性和指定属性值。作用：选中含有指定属性和指定属性值。作用：选中含有指定属性的元素。作用：选中含有指定属性和。作用：选择某元素后面的。作用：选中指定属性和。
CSS3 选择器 基本选择器介绍
12-13
第二部分我把他称作是属性选择器，第三部分我把他称作伪类选择器，这一部分也是最难理解和掌握的部分，今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图 下面我们先看看上
使用CSS属性选择器来拼接HTML的DNA的方法
12-13
一般我们最普遍的使用方法是将HTML属性放进一个方括号中，称之为属性选择器。例如： [href] { color: chartreuse; } 任何具有href属性且没有更具体的选择器的html元素现在都会变成黄绿色。属性选择器的特性和类...
CSS教程之css选择器 、属性、值
10-30
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。 每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。 值在冒号（不是等号）后面，分号分离属性。
CSS3新增特性（二）
m0_48670609的博客
04-24 1200
接上一篇，CSS3新增特性，包括 2D 转换（位移、缩放、旋转、倾斜）和 3D 转换，以及动画。
CSS3（响应式布局）
l_al_al_a的博客
04-27 680
/只在x方向上重复。//只在y方向上重复。//前一个时间用于表示过渡效果持续时间，后一个时间用于表示过渡效果的延迟。# 和 #注意：其中angle对应单位为：deg。# 及 #
高德地图+HTML+点击事件+自定心信息窗体
最新发布
pursue.dreams的博客
04-30 206
【代码】高德地图+HTML+点击事件+自定心信息窗体。
用html画一个四叶草
liulang68的博客
04-20 1689
以上是部分代码，需要请看主页加联系方式。
css3选择器-属性选择器
04-20
CSS3选择器-属性选择器是一种用于选择具有特定属性或属性值的HTML元素的CSS选择器。它可以根据元素的属性来选择元素，从而实现对元素的样式控制。 CSS3属性选择器有以下几种类型： 1. [attribute]：选择具有指定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值