您的位置：首页 > Web前端 > CSS

CSS3选择器--属性选择器

2017-01-01 09:42 591 查看

在此之前，大家应该学了一些基本的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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航