CSS3选择器--属性选择器

最新推荐文章于 2023-04-09 13:44:16 发布

Wendy-lxq

最新推荐文章于 2023-04-09 13:44:16 发布

阅读量1.1k

点赞数 4

分类专栏： CSS & CSS3 文章标签： css3

本文链接：https://blog.csdn.net/u010297791/article/details/53964650

版权

CSS & CSS3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

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

Wendy-lxq

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器--属性选择器

在此之前，大家应该学了一些基本的css选择器，比如简单的id选择器，class选择器，标签选择器，群组选择器，包含选择器等，本篇文章主要是分享几个CSS3的属性选择器，属性选择器应用起来还是非常方便的。一、'匹配所有'的属性选择器 Element[attribute]，只使用属性名，但是没有确定的任何属性值。例子如下，通过匹配属性为course的标签，就可以匹配所有属性
复制链接

扫一扫

专栏目录