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查到官方权威信息

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

怎么设置 http 请求 并发 连接数 限制

问: 我需要不停的get一个url 但是 不管 我开启 20 个 还是 100个 goroutine 进行 http.Get 最终都是 每秒能请求10次左右 能...

46670
来自专栏javascript趣味编程

3.4 js生成报表

如下函数示意在ID为tbHost的元素内追加一个表格:假设nodes为二维数组,遍历其所有行和列,将其元素的Ap属性以二维表格的形式显式出来。通过该函数可以直观...

47900
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(一)CSS3概述,选择器

CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

12830
来自专栏Windows Community

Windows Phone 8.1 新特性 - 控件之列表选择控件

本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件。 在Windows Phone 8 时代,大家都会使用 LongListSelecto...

34990
来自专栏Golang语言社区

Golang的iota问题

通常人们认为iota就是0,其实并非如此。 确切的说,当iota在紧跟着关键字const的第一行出现时,iota为0,在第二行出现时,iota为1,以此类推;当...

399110
来自专栏专业duilib使用+业余界面开发

duilib自绘

21930
来自专栏闻道于事

CSS样式表基础

层叠样式表:Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态...

27250
来自专栏javascript趣味编程

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

17500
来自专栏极客慕白的成长之路

JavaScript实现计算器方法拓展

除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://geekmubai.com/programming/757.html

24910
来自专栏老秦求学

百练 石头剪刀布

总时间限制: 1000ms内存限制: 65536kB描述 石头剪刀布是常见的猜拳游戏。石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,则不分胜负。 一天,小...

36770

扫码关注云+社区

领取腾讯云代金券