css2.1中的属性选择器(css高手请绕道)
早上看了司徒先生的js版属性选择器(http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.html),也激发了我深入了解css选择器的学习欲望, 整理于此以便日后备查
*:匹配任何元素。
例如: *{margin:0}
E:匹配任何E元素。
例如: div{color:red}
E F:匹配E的所有后代F元素。
E > F:匹配E的所有子F元素。这个选择器与上一个选择器的区别是:E F会匹配E标签里面嵌套的所有F标签,而E > F只会匹配E标签里面嵌套的第一层F标签。
说明:(Ie6以上版本支持)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性选择器</title>
<style type="text/css">
*{color:black;}
.cls1 > div {color:red}
.cls2 div{color:green}
</style>
运行代码
E:first-child:匹配第一个E元素。
说明:IE6以上版本支持
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>E:first-child</title>
<style type="text/css">
.cls1 div:first-child{color:red}
</style>
</head>
<body>
<div class="cls1">
<div >我是红色的</div>
<div >我是黑色的</div>
</div>
</body>
</html>
运行代码
E:link,E:visited:分别匹配还没访问过的超链接和已经访问过的超链接。
E:active,E:hover,E:focus:匹配各种用户动作下的E元素。
说明:IE6以上的版本,允许任何元素都可使用:hover等伪类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性选择器</title>
<style type="text/css">
.cls1:first-child{color:red}
.cls1:focus{border:solid 1px #f00} /*-ie8才开始支持-*/
.cls1:hover{background:#ff9} /*-ie7才开始支持-*/
</style>
</head>
<body>
<input type="text" class="cls1"></input>
<input type="text" class="cls1"></input>
<input type="text" class="cls1"></input>
</body>
</html>
运行代码
E + F:匹配与E邻接的下一个F元素。
说明:(可恶的IE不支持-不管是IE的哪个版本都一样) 该选择器还有一个非标准的写法 E ~ F 效果跟E + F一样(但是~的这种写法,IE7,IE8能识别)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性选择器</title>
<style type="text/css">
.cls1 + .cls2{border:solid 1px #f00}
</style>
</head>
<body>
<input type="text" class="cls1"></input>
<input type="text" class="cls2"></input>
<input type="text" class="cls1"></input>
<input type="text" class="cls2"></input>
</body>
</html>
运行代码
E[foo]:匹配设置了foo属性(不管是什么值)的E元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性选择器</title>
<style type="text/css">
.cls1[email]{border:solid 1px #f00} /*-ie7才开始支持-*/
</style>
</head>
<body>
<input type="text" class="cls1" email="yjmyzz@126.com"></input>
<input type="text" class="cls1"></input>
</body>
</html>
运行代码
E[foo="warning"]:匹配任何foo属性为"warning"的E元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性选择器</title>
<style type="text/css">
input[class='cls1']{border:solid 1px #f00} /*--ie7才开始支持(该属性区分大小写)--*/
</style>
</head>
<body>
<input type="text" class="cls1" value='cls1'></input>
<input type="text" class="Cls1" value='Cls1'></input>
<input type="text" class="cls2" value='cls2'></input>
</body>
</html>
运行代码
E[foo~="warning"]:匹配任何foo属性以空白作为分隔,其中一个值是"warning"的E元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性选择器</title>
<style type="text/css">
input[class~='cls2']{border:solid 1px #f00} /*--ie7才开始支持(该属性区分大小写)--*/
</style>
</head>
<body>
<input type="text" class="cls1 cls2" value='cls1 cls2'></input>
<input type="text" class="Cls1" value='Cls1'></input>
<input type="text" class="cls2" value='cls2'></input>
</body>
</html>
运行代码
E[lang!="en"]:匹配任何lang属性值以"-"作为分隔符,而且第一个精确等于"en"的E元素(也匹配lang属性只有属性值en的元素)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性选择器</title>
<style type="text/css">
input[class|='cls1']{border:solid 1px #f00} /*--ie7才开始支持(该属性区分大小写)--*/
</style>
</head>
<body>
<input type="text" class="cls1-cls2-cls3" value='cls1-cls2-cls3'></input>
<input type="text" class="cls2-cls1" value='cls2-cls1'></input>
<input type="text" class="cls1" value='cls1'></input>
</body>
</html>
运行代码 E[foo*="abc"]:匹配任何有foo属性值,且属性值包含"abc"的E元素。 说明:虽然w3c组织未把该选择器列在标准之中,但是5大浏览器都支持(除IE6及IE6以下版本),已经是事实标准
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性选择器</title>
<style type="text/css">
input[class*='cls1']{border:solid 1px #f00} /*--ie7才开始支持(该属性区分大小写)--*/
</style>
</head>
<body>
<input type="text" class="cls1-cls2-cls3" value='cls1-cls2-cls3'></input>
<input type="text" class="cls2cls1" value='cls2cls1'></input>
<input type="text" class="Cls1" value='Cls1'></input>
</body>
</html>
运行代码
E.warning:相当于E[class~="warning"],匹配任何使用了warning样式类的E元素。
E#myid:相当于E[id='myid'],匹配任何id为myid的E元素。
E:before和E:after ,这是二个很少用的伪类,用于在E元素前后显示一些内容(IE8才开始支持)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>after,before伪类</title>
<style type="text/css">
*{font-size:12px;line-height:20px;}
.cls1:before{content:"欢迎光临我的网站";display:block;border-bottom:solid 1px #ccc;line-height:25px;}
.cls1:after{content:"版权所有 2009";display:block;border-top:solid 1px #ccc;line-height:25px;}
</style>
</head>
<body>
<p class="cls1">这是一段文字,演示伪类的用法,只有在IE8或Safari,Chrome,FireFox,Chrome,Opera上才能看见before,after的内容</p>
</body>
</html>
运行代码
以上属性选择器可以在http://www.w3.org/TR/CSS2/selector.html查到官方权威信息
- Java 序列化与反序列化
- Percona Toolkit 常用工具使用介绍
- 深入浅出Redis-redis哨兵集群
- Spring-Blog:个人博客(一)-Mybatis 读写分离
- Spring-boot:5分钟整合Dubbo构建分布式服务
- MYSQL5.6优化器的一个新特性MMR
- Mysql聚集索引和非聚集索引
- Spring-Boot:6分钟掌握SpringBoot开发
- Zookeeper-5分钟快速掌握分布式应用程序协调服
- Mysql索引长度计算
- Spring-Boot:Spring Cloud构建微服务架构
- Python-WXPY实现微信监控报警
- MySQL InnoDB Lock(一)
- Java 时间类-Calendar、Date、LocalDate/LocalTime
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 巧用 readonly与 const
- c# 枚举之间的转换
- React Hook 的底层实现原理
- Tensorflow Object Detection API 终于支持tensorflow1.x与tensorflow2.x了
- 细说枚举
- 多用as少用强制类型转换
- 如何重写object虚方法
- 一键智能抠图-原理与实现
- 少用 string.Format
- FormattableString 取代特定区域字符串
- 汇总 | OpenCV DNN模块中支持的分类网络
- 优先考虑 nameof
- JavaScript|数组对象
- Tensorflow + OpenCV4 安全帽检测模型训练与推理
- .NET对象清理