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 ...
随机推荐
- javascript jsscript .js xml html json soap
javascript ecma标准的脚本语言用于 jsscript 微软标准的一种脚本语言 .js javascript或jsscript保存成文件的形式可用于在html里重复引用 jsscript只 ...
- .NET中通過OUTLOOK發送附件內容
最近碰到一個發送郵件附件的問題,隨便幾下來,方便以後學習. string[] files = System.IO.Directory.GetFiles(@"~/UploadData" ...
- android 消息机制
一.Android应用程序的主线程主要用于更新UI界面,并且主线程不能做耗时操作,否则会引起ANR:这种情况下需要开一个子线程来进行耗时操作,动作完成之后,子线程发消息给主线程通知其更新UI显示,常见 ...
- Java运行环境的配置
Make sure you do not use the trailing semicolon: This will not work: set JAVA_HOME=C:\Program Files ...
- 编写高性能Web应用程序的10个技巧
这篇文章讨论了: ·一般ASP.NET性能的秘密 ·能提高ASP.NET表现的有用的技巧和窍门 ·在ASP.NET中使用数据库的建议 ·ASP.NET中的缓存和后台处理 使用ASP.NET编写一个We ...
- ssh-keygen -t rsa P “” -f ~/.ssh/id_rsa不提示直接生成密钥
ssh-keygen -t rsa P "" -f ~/.ssh/id_rsa不提示直接生成密钥
- Linux之netstat命令详解
简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Member ...
- java转换unicode，筛选文件中的insert语句并把日期给转换为可以直接在数据库执行的语句
package com; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; impo ...
- Animation小问题整理
1.在动画播放中改变层级内容的名字,不会造成动画内容映射的改变. 2.Animator动画剪辑层级没问题,但是不播放 检查是否Mask损坏,FBX文件的Animations选项下面有个Mask.Uni ...
- 基于.NET的微软ORM框架视频教程（Entity Framework技术）
基于.NET的微软ORM框架视频教程(Entity Framework技术) 第一讲 ORM映射 第二讲 初识EntifyFramework框架 第三讲 LINQ表达式查询 第四讲 LINQ方法查询 ...