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-如何识别哪个静态控件被点击
创建多个具体SS_NOTIFY样式的static controls 根据文档显示,当用户单击具有SS_NOTIFY样式的静态控件时,将发送STN_CLICKED通知代码.控件的父窗口通过WM_COMM ...
- Java 使用 itext 向PDF插入数据和图片
Java 使用 itext 向PDF插入数据和图片 一.下载Adobe Acrobat DC 二.制作模板 1.准备一个word模板,并转换成PDF格式 2.使用Adobe Acrobat DC打开P ...
- zynq7000 I2C RTC 与 串口使用
RS485 串口 测试 硬件上2路串口,其中UART 1对应PS STD IN/OUT,UART 0对应RS485: 图 ‑1 RS485电路,自动转换输入.输出方向 可参考 https://blog ...
- 设置 sudo 无需输入密码
* 设置 sudo 无需输入密码,如下:* [root@localhost ~]# visudo* 在"root ALL=(ALL) ALL"这一行下面,再加入一行:* 将原来的: ...
- 【Azure 应用服务】遇见“无法创建hybrid connection for App Service”的解决办法
Hybrid Connection (混合连接) 在两个联网应用程序之间启用了双向.请求-响应和二进制流通信以及简单的数据报流.通过混合连接,可以实现应用部署在公网环境中,而数据库保存在本地私网环境中 ...
- Nebula Graph｜如何打造多版本文档中心
本文首发于 Nebula Graph Community 公众号 世界上没有完美的产品,每个不完美的产品都需要一份文档. 为什么需要文档 打造出一款产品后,我们需要一份文档来回答以下问题: 设计这款产 ...
- 标准差为什么除以n-1
参考:https://blog.csdn.net/qian2213762498/article/details/80558018 如果要测量中国人的平均身高,假设为μ,通常会随机取假设10000人,求 ...
- C++函数模板总结：
//C++提高编程 模板(泛型编程 STL)//模板不可以直接使用 它只是一个框架//模板的通用并不是万能的//语法//template<typename T>//函数模板两种方式//1. ...
- 关于Java并发多线程的一点思考
写在开头 在过去的2023年双11活动中,天猫的累计访问人次达到了8亿,京东超60个品牌销售破10亿,直播观看人数3.0亿人次,订单支付频率1分钟之内可达百万级峰值,这样的瞬间高并发活动,给服务端带来 ...
- WPF之x命名空间
目录 x命名空间内容 x命名空间的Attribute x:Class x:ClassModifier x:Name x:FieldModifier x:Key x:Shared x命名空间的标记扩展 ...