三个CSS高级匹配属性选择器

发表于 2009年8月31日由 kily

CSS的选择器可谓种类繁多，属性选择器就是其中一种，虽然老浏览器(如IE6)不支持，但当前主流的标准浏览器都很好的支持。所以有必要学习一下。

所谓属性选择器就是能选择具有指定属性元素的CSS选择器。比如：

input[type="text"] { border:1px;}

这条CSS规则就声明了类型为文本框的输入标签的边框为1像素。这是一般而言的属性选择器，当元素比较复杂时就得用到可以匹配属性的高级选择器了。比如：

div[class^="menu"] { color:red;}

div[class$="menu"] { color:red;}

div[class*="menu"] { color:red;}

大家可以看到不同的一点就是class后面跟的三人符号：”^”,”$”,”*”。分别表示：

1.匹配具有class属性，且值以menu开头的div元素。例如：class为menu1,menua,menu0都可以渲染指定CSS规则。

2.匹配具有class属性，且值以menu结尾的div元素。例如：class为1menu,amenu,0menu都可以渲染指定CSS规则。

3.匹配具有class属性，且值含有menu的div元素。例如：class为1menu,menu1,0menua都可以渲染指定CSS规则。

注意：须在标准浏览器下浏览(IE7+ , FireFox2.0+ , chrome1.0+ , safari3.1+)

《三个CSS高级匹配属性选择器》上有 14 条评论

Solo 在 2010年10月13日15:30 说：

谢了，正好找到答案了。

回复 ↓
重阳在 2009年9月5日15:14 说：

前几天接触过这些知识，现在就又算巩固了一下

回复 ↓
亦歌在 2009年9月5日01:32 说：

这个还不知道呢，css我是半桶水。

回复 ↓
0cai 在 2009年9月4日18:34 说：

看来我也有许多要学的还是要多逛逛啊

回复 ↓
大剑在 2009年9月1日12:02 说：

CSS一直都是半吊子，抽空一定要好好补习一下

回复 ↓
安在 2009年8月31日18:28 说：

这个选择器是有意思

回复 ↓
hiro 在 2009年8月31日17:25 说：

家点js就可以修复ie6、7

回复 ↓
- kily 在 2009年8月31日20:49 说：
  
  @hiro JQuery貌似可以支持的吧?
  
  回复 ↓
卢松松在 2009年8月31日15:48 说：

不错效果是很棒滴

回复 ↓
- kily 在 2009年8月31日15:51 说：
  
  @卢松松呵呵.将来肯定会流行起来的东西,值得学习^!^
  
  回复 ↓
feicun 在 2009年8月31日15:47 说：

kily现在的网页字体是不是太小了？反正在我这里显示的状况很差……

回复 ↓
- kily 在 2009年8月31日15:50 说：
  
  @feicun 呵呵.还好啊.可能是你看自己的网站字体14px看习惯了吧?
  总算是出现了哈,安这几天也避完暑了,好多同学都开始改新博客了呢^!^
  
  回复 ↓
  - feicun 在 2009年8月31日16:04 说：
    
    小安子也没闲着，cara dillon的站他给弄得很漂亮滴
    
    回复 ↓
    - kily 在 2009年8月31日16:35 说：
      
      @feicun 呵呵.是吗?那我得去看看呢!
      
      回复 ↓

发表评论取消回复