css3中属性选择器的使用

最新推荐文章于 2024-04-29 13:37:01 发布

打不死滴小强

最新推荐文章于 2024-04-29 13:37:01 发布

阅读量1k

点赞数

分类专栏： html5/css相关文章标签： html5 css3 选择器

本文链接：https://blog.csdn.net/u012859748/article/details/52556345

版权

html5/css相关专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本篇简要介绍一下css3中属性选择器的使用，例。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3中属性选择器的使用</title>
    <style>
        /*[id*= section1]{ */
        /*background: green;*/
        /*}*/
        /*[id*= section2]{*/
        /*background: #ff6600;*/
        /*}*/
        /*[id*=section1-1]{*/
        /*background: goldenrod;*/
        /*}*/
        /*[id*=section]{*/
        /*background: #000;*/
        /*}*/
        /*[id^=s]{*/
        /*background: cornflowerblue;*/
        /*}*/
        /*[id^=b]{*/
        /*background: hotpink;*/
        /*}*/
        [id$=c]{
            background: green;
        }
        [id$=\-1]{
            background: saddlebrown;
        }
        [id$=\_2]{
            background: red;
        }
    </style>
</head>
<body>
<h1>CSS3中的属性选择器的使用</h1>
<div id="section1a">section</div>
<div id="section1-1">section1-1</div>
<div id="section1-1-1c">section1-1-1c</div>
<div id="section1-1-2d">section1-1-2d</div>
<div id="section1-2e">section1-2e</div>
<div id="section1-2-1">section1-2-1</div>
<div id="bsection2">section2</div>
<div id="section2-1">section2-1</div>
<div id="section2-2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_3">section2-2</div>
</body>
</html>

其中：

[att*=val]属性选择器；如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。

[att^=val]属性选择器；如果用att表示的属性的属性值的开头字符为用val指定的字符的话，那么该元素使用这个样式。

[att$=val]属性选择器；如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。

此外，还有伪类选择器、伪元素选择器、结构性伪类选择器等。

还可以追加内容，如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3属性选择器</title>
    <style>
        a[href$=html]:after{
            content: "网页文件";
            color: green;
        }
        a[href$=jpg]:after{
            content: "图片文件";
            color: green;
        }
    </style>
</head>
<body>
<a href="anli.html">网站首页</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="1.jpg">网站图片</a>
</body>
</html>

打不死滴小强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3中属性选择器的使用

本篇简要介绍一下css3中属性选择器的使用，例。 CSS3中属性选择器的使用 /*[id*= section1]{ */ /*background: green;*/ /*}*/ /*[id*= section2]{*/ /*background: #ff6600;*/
复制链接

扫一扫

专栏目录