注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天朝布衣田中码农参上

苦逼码农的点点滴滴,请多多指教!

 
 
 

日志

 
 
 
 

CSS属性选择器语法  

2017-09-17 08:34:45|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
CSS2中引入了CSS属性选择器,它可以根据元素的属性及属性值来选择元素。
1)简单CSS属性选择器
选择具有某个属性的元素,而不论该属性的值是什么,可以使用一个简单CSS属性选择器。
例如,要选择有class属性的a元素,使其文本为红色,而选择具有href属性的a元素,使其文本为蓝色,或者这两个元素都有,让其文本颜色为黄色。下面是示范代码,请注意,根据多个属性值进行选择,只需将属性选择器链接在一起即可。

<!DOCTYPE HTML>
<html>
<head>
<style>
a[href]{color:blue;}
a[class]{color:red;}
a[href][class]{color:yellow;}
</style>
</head>
<body>
<a href="" >593668.com</a>
<a class="" >237h.com</a>
<a href="" class="" >593668.com-237h.com</a>
</html>

CSS属性选择器语法 - 1976xyg - 红尘若梦
2)根据具体属性值选择
除了选择具有某种属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。当然这里也可以把多个属性-值选择器链接在一起来选择元素。
例如,要选择指向web服务器上的某个特定文档的超链接[http://593668.com]设置为红色:

<!DOCTYPE HTML>
<html>
<head>
<style>
a[href="http://593668.com"]{color:red;}
</style>
</head>
<body>
<a href="http://593668.com" >593668.com</a>
<a class="" >237h.com</a>
<a href="" class="" >593668.com-237h.com</a>
</html>

CSS属性选择器语法 - 1976xyg - 红尘若梦
3)根据部分属性值选择
CSS属性选择器对于拥有多个用空格分隔的属性值的元素的选择时,如果只想匹配某个属性值,就可以采取类似正则的方式处理 。这里有三种情况来处理,判断以某字符打头用^=,以某字符结尾用$=,包含某字符用*=。
下面就是一个简单示范。

<!DOCTYPE HTML>
<html>
<head>
<style>
a[href^="http://593668.com"]{color:red;}
a[href$="2211.html"]{color:blue;}
a[href*="abb"]{color:yellow;}
</style>
</head>
<body>
<a href="http://593668.com/8/2212.html" >593668.com</a>
<a href="http://237h.com/8/2211.html" >237h.com</a>
<a href="http://237h.com/abb/2211.html" >593668.com-237h.com</a>
</html>

CSS属性选择器语法 - 1976xyg - 红尘若梦
4)特定属性选择类型
在一些元素包含多种class类时,就需要用到这种了。

<!DOCTYPE HTML>
<html>
<head>
<style>
a[class~="b"]{color:red;}
</style>
</head>
<body>
<a class="a b">593668.com</a>
<a class="b c" >237h.com</a>
<a class="d" >593668.com-237h.com</a>
</html>

CSS属性选择器语法 - 1976xyg - 红尘若梦
当然啦,这种属性选择器还有更多的用法,以上不过是一些简单的例子,仅仅为抛砖引玉之用,希望可以帮到大家。
 
  评论这张
 
阅读(0)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017