CSS3选择器--属性选择器

来源：互联网发布：2016龙年快乐最新域名编辑：程序博客网时间：2024/05/30 23:47

在此之前，大家应该学了一些基本的css选择器，比如简单的id选择器，class选择器，标签选择器，群组选择器，包含选择器等，本篇文章主要是分享几个CSS3的属性选择器，当然有几个其实CSS已经可以应用，我这里只是一起总结，写在一起了。属性选择器应用起来还是非常方便的。

一、'匹配所有'的属性选择器

Element[attribute]，只使用属性名，但是没有确定的任何属性值。例子如下，通过匹配属性为course的标签，就可以匹配所有属性为course的标签。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        p{            height:30px;            width:300px;            border:1px solid #00A2E9;        }        p[course]{            background-color: #85f8ff;        }    </style></head><body>    <p course="h-html">HTML</p>    <p course="c-css j">CSS</p>    <p course="j-js m-j">JavaScript</p>    <p course="j-jq m-j">jQuery</p></body></html>

效果：

二、'匹配指定值'的属性选择器
Element[attribute=‘value’]，指定属性名，并指定了该属性的属性值，该属性值只能有一个。例子如下（结构跟上面的一样）：

p[course='h-html']{      background-color: #ff8fdc;}

效果：

三、'匹配指定值'的属性选择器
Element[attribute~=‘value’]，指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写。例子如下（结构跟上面的一样）：

p[course~='c-css']{     background-color: #73ff58;}

效果：

四、'匹配开头'的属性选择器
Element[attribute^=‘value’]，指定了属性名，并且有属性值，属性值是以value开头的。例子如下（结构跟上面的一样）：

p[course^='j']{      background-color: #ffef6e;}

效果：

五、'匹配结尾'的属性选择器
Element[attribute$=‘value’]指定了属性名，并且有属性值，而且属性值是以value结束的。例子如下（结构跟上面的一样）：

p[course$='j']{      background-color: #34b1ff;}

效果：

六、'匹配包含内容'的属性选择器
Element[attribute*=‘value’]指定了属性名，并且有属性值，而且属值中包含了value。例子如下（结构跟上面的一样）：

p[course*='m']{     background-color: #ff2834;}

效果：

七、'匹配开头'的属性选择器
Element[attribute|=‘value’]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）。例子如下（结构跟上面的一样）：

p[course|='j']{    background-color: #382aff;}

效果：

最后写一个案例说明，模仿百度文库，如果文件是ppt，前面的图片就显示ppt，如果是word，前面的图片就显示word，如果是pdf，前面就显示pdf的图片。效果如下：

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>模仿百度文库</title>    <style>        p{            width:300px;            height:30px;            font-size: 15px;        }        p a{            padding-left: 25px;            height:30px;            line-height:30px;            text-decoration: none;            display: block;        }        a[href*='word']{            background:url("images/word.png") no-repeat 3px center;        }        a[href*='ppt']{            background:url("images/ppt.png") no-repeat 3px center;        }        a[href*='pdf']{            background:url("images/pdf.png") no-repeat 3px center;        }    </style></head><body><p><a href="http://www.wenku.baidu/ppt/javascript.html">JavaScript教程--从入门到精通</a></p><p><a href="http://www.wenku.baidu/word/javascript.html">javascript简介</a></p><p><a href="http://www.wenku.baidu/pdf/javascript.html">javascript教程</a></p></body></html>

2 0