4 CSS属性选择器
4 属性选择器
属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的用法。
- 第一种用法
作用：选择含有指定属性的元素。
语法：[属性名]{}
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type]{
border: 1px solid red;
}
</style>
</head>
<body>
用户名：<input type="username">
密 码：<input type="password">
<br>
数据量：<input id="count">
</body>
</html>
运行结果：
- 第二种用法
作用：选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{}
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type="username"]{
border: 1px solid blue;
}
input[type="password"]{
border: 1px solid red;
}
</style>
</head>
<body>
用户名：<input type="username">
密 码：<input type="password">
<br>
数据量：<input type="count">
</body>
</html>
运行结果：
- 第三种用法
作用：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{}
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*
第一种方法：选择含有指定属性的元素。
语法：[属性名]{}
*/
input[type="username"]{
border: 1px solid blue;
}
/*
第二种用法：选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{}
*/
input[type="password"]{
border: 1px solid red;
}
/*
第三种用法：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{}
*/
div[id^="tit"]{
color: red;
}
div[id^="sala"]{
color: blueviolet;
}
</style>
</head>
<body>
用户名：<input type="username">
密 码：<input type="password">
<br>
数据量：<input type="count">
<div id="title">生而自由, 爱而无畏</div>
<div id="salary">5万元</div>
<div id="proname">大项目</div>
</body>
</html>
- 第四种用法
作用：选择含有指定属性及指定属性值结尾的元素。
语法：[属性名$=属性值]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*
第一种方法：选择含有指定属性的元素。
语法：[属性名]{}
*/
input[type="username"]{
border: 1px solid blue;
}
/*
第二种用法：选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{}
*/
input[type="password"]{
border: 1px solid red;
}
/*
第三种用法：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{}
*/
div[id^="tit"]{
color: red;
}
div[id^="sala"]{
color: blueviolet;
}
/*
第四种用法：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{}
*/
</style>
</head>
<body>
用户名：<input type="username">
密 码：<input type="password">
<br>
数据量：<input type="count">
<div id="title">生而自由, 爱而无畏</div>
<div id="salary">5万元</div>
<div id="proname">大项目</div>
</body>
</html>
执行结果：
- 第五种用法
作用：选择含有指定属性，只要含有某个属性值的元素。
语法：[属性值*=属性名]{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*
第一种方法：选择含有指定属性的元素。
语法：[属性名]{}
*/
input[type="username"]{
border: 1px solid blue;
}
/*
第二种用法：选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{}
*/
input[type="password"]{
border: 1px solid red;
}
/*
第三种用法：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{}
*/
div[id^="tit"]{
color: red;
}
div[id^="sala"]{
color: blueviolet;
}
/*
第四种用法：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{}
*/
div[id$="name"]{
color: orange;
}
/*
第五种用法：选择含有指定属性，只要含有某个属性值的元素。
语法：[属性值*=属性名]{}
*/
[title*="login"]{
background-color: #616161;
}
</style>
</head>
<body>
用户名：<input type="username" title="login">
密 码：<input type="password" title="login">
<br>
数据量：<input type="count">
<div id="title">生而自由, 爱而无畏</div>
<div id="salary">5万元</div>
<div id="proname" title="project">大项目</div>
</body>
</html>
执行结果：
总结如下：
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
4 CSS属性选择器的更多相关文章
- IE7浏览器下CSS属性选择器二三事
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...
- CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
- CSS：CSS 属性 选择器
ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...
- CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...
- CSS属性选择器温故-4
1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总 ...
- CSS 属性选择器(八)
一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属 ...
- CSS笔记（二）CSS属性选择器
对带有指定属性的HTML元素设置样式. 参考: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp 选择器 描述 [att ...
- 前端学习 -- Css -- 属性选择器
属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
- 使用这些 CSS 属性选择器来提高前端开发效率
属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...
- css 属性选择器
css2的属性选择器 1.[class~="flower"]:选中有flower的class class="flower ss" class="ss ...
随机推荐
- [BUUCTF][WEB][极客大挑战 2019]Http 1
打开靶机提供的url 右键查看网页源代码 发现一个链接 (Secret.php),访问看看 返回: It doesn't come from 'https://Sycsecret.buuoj.cn' ...
- 硬件开发笔记（八）: 硬件开发基本流程，制作一个USB转RS232的模块（七）：创建基础DIP元器件（晶振）封装并关联原理图元器件
前言 有了原理图,可以设计硬件PCB,在设计PCB之间还有一个协同优先动作,就是映射封装,原理图库的元器件我们是自己设计的.为了更好的表述封装设计过程,本文描述了创建晶振封装(DIP),将原理图的 ...
- java基础字符串---02
String 概述 String类在java.lang包下,所以使用的时候不需要导包 String类代表字符串,java程序中的所有字符串文字(例如"abc")都被实现为此类的实例 ...
- 回顾 2023，NebulaGraph 的这一年的变化
一年又过去了,感谢你和 NebulaGraph 一起又走过一个春夏秋冬.在这 365 天里,我们一起见证了 214 个 commit 带来的 NebulaGraph 3 个中版本的上线,它们分别是 v ...
- .Net之配置文件自定义
前文讲获取配置文件内容的时候,是获取默认的appsettings.json配置文件的配置,下面说明下如何进行自定义配置文件获取 1. Json Provider 1.1 构建独立的IConfigura ...
- 影刀rpa：关于if单条件切换到多条件时的不便之处
现有需求,只判断一个条件是否满足即可,但随着后续业务开发,这里得if就需要判断多个条件,此时要是想将if单条件改为多条件的话,就得先拉一个if多条件的指令,然后再将if单条件中的语句全部移动到if多条 ...
- Java 练习题 看起来很简单 写起来却有点难度
1 import java.io.PrintStream; 2 3 /* 4 * 5 * public class ValueTransferTest4 6 *{ 7 * public static ...
- 阿里巴巴/1688 api接口 获取商品详情 数据采集
iDataRiver平台 https://www.idatariver.com/zh-cn/ 提供开箱即用的阿里巴巴1688电商数据采集API,供用户按需调用. 接口使用详情请参考阿里巴巴1688接口 ...
- Spring整合mybatis使用xml配置事务
自己准备开始教授Java相关的技术,Spring框架是必须让学生学习的框架之一.里面有一个事务相关的 配置,以前刚学习Spring框架的时候有接触过,只是过了很多年,很多东西都已经淡忘.再来回忆一下 ...
- Caxa 二次开发 ObjectCRX-1 踩坑：环境配置以及 Helloworld
绝了,坑是真 nm 的多,官方给的文档里到处都是坑. 用的环境 ObjectCRX,以下简称 objcrx. #1 安装环境 & 参考文档的大坑 #1.1 Caxa 提供的文档和环境安装包 首 ...