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 ...
随机推荐
- win32 - 关于GDI的RGB的数据分析
此文章为小结,仅供参考. 第一种情况,从桌面DC获取RGBA的数据. 32位 HDC hdc, hdcTemp; RECT rect; BYTE* bitPointer; int x, y; int ...
- 常用Windows控制台命令
查看网络连接信息 1.查看所有网络连接 netstat -ano -a 显示所有连接和侦听端口. -n 以数字形式显示地址和端口号. -o 显示拥有的与每个连接关联的进程 ID. 详细的使用方式使用n ...
- django的orm多表查询作业第五题答案
5.每个作者出版的所有书的最高价格以及最高价格的那本书的名称. 用django的模型类写不出来的,只能用原生sql写这题 关于第五题,mysql5.7及以上版本,使用下面的答案 set sql_mod ...
- django中信号
# 信号的理解 在某个行为进行的某个阶段给这个行为添加一个附带的行为 # 相关api ## 数据表 pre_init # django的model执行其构造方法前,自动触发 post_init # d ...
- window上使用Putty通过ssh远程连接并通过Xming实现X11图形界面功能
# 0.先确认远程服务器的ssh配置 >>> grep X11 /etc/ssh/sshd_config X11Forwarding yes #X11DisplayOffset 10 ...
- 问题：django.template.exceptions.TemplateSyntaxError: 'staticfiles' is not a registered tag library. Must be one of: admin_list admin_modify admin_urls cache i18n l10n log rest_framework static tz
django使用swagger自动生成API文档时,报错 解决方法 在settings.py里面配置一下以下代码 'libraries': { 'staticfiles': 'django.templ ...
- Spring Cloud Zuul 获取当前请求的路由信息和路由后端的服务节点信息
基本思路 参考spring-cloud-zuul-ratelimit开源项目,在过滤器中根据当前的请求路径,判断当前的路由信息,当取得路由信息后,可以对服务的调用次数做统计等操作. 具体实现 创建一个 ...
- 【Azure Redis 缓存】使用StackExchange.Redis，偶发ERROR - Timeout performing HSET (15000ms)
问题描述 使用StackExchange.Redis 作为Redis客户端SDK,连接Azure Redis服务,长期运行后发现,每天都偶发 Timeout Error. 错误消息如下: StackE ...
- 【Azure 应用服务】Azure Function 不能被触发
问题描述 Azure Function 不能被Postman 触发,错误信息如下: Error: write EPROTO 4020778632:error:100000f7:SSL routines ...
- 并行化优化KD树算法：使用C#实现高效的最近邻搜索
本文信息 中文名:<并行化优化KD树算法:使用C#实现高效的最近邻搜索> 英文名:"Parallelized Optimization of KD-Tree Algorithm: ...