css属性选择器
1.E[att] 选择具有attr属性的E元素。
2.E[att="val"] 选择具有att属性且属性值等于val的E元素
3.E[att~="val"] 选择具有att属性的元素，且元素值列表中有一个符合val的元素
4.E[att^="val"] 选择E元素中有att属性，且以val开头的元素。
5.E[att$="val"] 选择E元素中有att属性，且以val结尾的元素。
6.E[att*="val"] 选择具有att属性且属性值包含val的字符串的E元素。
1.E[att]选择具有attr属性的E元素。示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
option[disabled]{color: red;}
</style>
</head>
<body>
<select name="">
<option value="0">火车</option>
<option value="1" disabled="disabled">汽车</option>
<option value="2">轮船</option>
<option value="3">飞机</option>
</select>
</body>
</html>
显示汽车为红色。如果要全部变为红色可把 disabled 换为 value。
2.E[att="val"] 选择具有att属性且属性值等于val的E元素。（他不仅要有符合的属性，值也要符合才会被选中。）示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
input[type="text"]{height: 100px;}
</style>
</head>
<body>
<form action="" method="post">
<input type="text" placeholder="这是文本框"/>
<input type="password" placeholder="这是密码"/>
<input type="radio"/>
<input type="submit"/>
</form>
</body>
</html>
显示输入文本区域高为100像素
3.E[att~="val"]选择具有att属性的元素，且元素值列表中有一个符合val的元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
p[class~=p1]{color: red;}
</style>
</head>
<body>
<div>
<p class="p1 pMore pColor">随便写点</p>
<p class="pMore pColor">段落二</p>
<p class="p12 pMore pColor">段落三</p>
<p class="p11 pMore pColor">段落四</p>
<p class="pMore p1 pColor">段落五</p>
</div>
</body>
</html>
显示为第一个和最后一个是红色的。
4.E[att^="val"]选择E元素中有att属性，且以val开头的元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
p[class^=p]{color: red;}
</style>
</head>
<body>
<div>
<p class="p1 pMore pColor">随便写点</p>
<p class="pMore pColor">段落二</p>
<p class="p12 pMore pColor">段落三</p>
<p class="p11 pMore pColor">段落四</p>
<p class="pMore p1 pColor">段落五</p>
</div>
</body>
</html>
全部显示为红色。
5.E[att$="val"]选择E元素中有att属性，且以结尾的元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
p[class$=p]{color: red;}
</style>
</head>
<body>
<div>
<p class="p1 pMore pColor">随便写点</p>
<p class="pMore pColor">段落二</p>
<p class="p12 pMore pColorp">段落三</p>
<p class="p11 pMore pColor">段落四</p>
<p class="pMore p1 pColorp">段落五</p>
</div>
</body>
</html>
段落三和段落五为红色
6.E[att*="val"] 选择具有att属性且属性值包含val的字符串的E元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
a[href*="jd"]{color: red;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
<a href="http://www.jd.com">京东</a>
</body>
</html>
京东显示为红色。
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 ...
随机推荐
- SQLite Expert 删除表数据并重置自动增长列
用下面的语句肯定是行不通的,语句不支持 truncate table t_Records 方法:1.删除表数据 2.重置自动增长列 where name='t_Records' /*name :是表名 ...
- C++之路进阶——codevs2492（上帝造题的七分钟 2）
2492 上帝造题的七分钟 2 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 大师 Master 题目描述 Description XLk觉得<上帝造题的七分钟&g ...
- 解决Failed to allocate memory: 8转
解决Failed to allocate memory: 8 昨天换了x64的Win7,发现在Eclipse上启动模拟器的时候存在问题,当设置的模拟器分辨率大于400×800的时候会出现 Failed ...
- HDU 4770 Lights Against DudelyLights
Lights Against Dudely Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- MVC（二）
所谓EF延迟加载,就是使用Lamabda或Linq查询数据时,EF并不会将数据直接查询出来,而是在用到的这个查询结果的时候才会加载到内存中.延迟加载也可以理解成 按需加载,顾名思义,就是按照所需的数据 ...
- UltraISO向U盘写入镜像特别慢
电脑:Dell INSPIRON 1416 系统:WIN7旗舰版32位 U盘:金士顿8G 镜像:CentOS7 ×86_64 问题: 开始使用"写入"功能,写入速度72k/s 后来 ...
- Tomcat常见的内存溢出，以及解决方法
一.常见的三种内存溢出错误: 1.java.lang.OutOfMemoryError:java heap space ====JVM Heap(堆)溢出 JVM再启动的时候回自动设置JVM H ...
- 页面缩放对css的影响
昨天发现一个上线的项目css样式明显不对,但是查看别人的电脑上的页面样式都是没问题的,于是找了半天原因,原来是我的浏览器对这个页面缩放了,导致样式问题. 发现了页面缩放会作用在同一个域名下的所有页面, ...
- 欧姆龙PLC---FINS/TCP
ETN 21 以太网fins/tcp命令 (1)将电脑和PLC设置为同一个网段 例如电脑IP为192.168.18.214,PLC的IP为192.168.18.4(PLC的端口默认为9600) (2) ...
- CSS3的chapter3
CSS的常用样式分为几大类: 字体样式(font,color, text-decoration ,text-shadow) 元素样式(width,height,margin,padding,opaci ...