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 ...
随机推荐
- csuoj 1507: 超大型LED显示屏
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1507 1507: 超大型LED显示屏 时间限制: 1 Sec 内存限制: 128 MB 提交: ...
- opencv的学习笔记4
通常更加高级的形态学变换,如开闭运算.形态学梯度.“顶帽”.“黑帽”等等,都是可以由常用的腐蚀膨胀技术结合来达到想要的效果. 1.开运算:先腐蚀后膨胀,用于用来消除小物体.在纤细点处分离物体.平滑较大 ...
- 在linux中的info手册的用法
就是一些快捷键 空格键向下翻页,当处在当前节点的底部时,空格键跳转到下一个节点. <DEL> 或者 <BACKSPACE> 向上翻页,当处在当前节点的顶部的时候,这两个键可以跳 ...
- 介绍kali下的一些小工具
1.macchanger 可以用来修改你的mac地址
- C++ 学习笔记（2） —— float 和 double 的精度
Size Range Precision 4 bytes ±1.18 x 10-38 to ±3.4 x 1038 6-9 significant digits, typically 7 8 byte ...
- nginx安装ssl
http://wiki.nginx.org/Modules#Standard_HTTP_modules 这里面带有所有基本的模块,及需要额外增加的模块 1.安装带有ssl模块的 nginx wget ...
- 认真分析mmap：是什么 为什么 怎么用【转】
转自:http://www.cnblogs.com/huxiao-tee/p/4660352.html?utm_source=tuicool&utm_medium=referral 阅读目录 ...
- [CCF] ISBN号码检测
CCF ISBN号码检测 题目概述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规定格式如"x-xxx-xxxxx-x",其 ...
- Android SQLite数据库使用
在Android开发中SQLite起着很重要的作用,网上SQLite的教程有很多很多,不过那些教程大多数都讲得不是很全面.本人总结了一些SQLite的常用的方法,借着论坛的大赛,跟大家分享分享的.一. ...
- GZFramework.DB.Core初始化
单数据库初始化,以MSSQL为例 public class DBConfig : IDBConfig { public static void InitDB() { GZFramework.DB.Co ...