属性选择器（属性值索引）

comegoing-归去兮来

已于 2022-07-31 09:05:09 修改

阅读量105

点赞数

分类专栏：前端css基础文章标签：前端 html css

于 2022-07-11 20:04:17 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125728992

版权

前端css基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

注意：以下所有实例均基于内联表样式

一、介绍

1、规则

属性选择器的基本格式为“[]+{}”

2、标签属性选择器

（h1标签中含有属性id的选择器）

h1[id]{color: white;}

3、属性值包含选择器

（1）属性值对应相等类型（含有属性id，且等于author的选择器）

[id="author"]{color: red;}

（2）$型，以字符串结尾类型（含有属性class，且class属性值以pra结尾）

[class$="pra"]{color: skyblue;}

（3）^型，以字符串开始类型（含有属性class，且class属性值以字符串af开头）

[class^="af"]{color: brown;}

（4）*型，包含字符串类型（含有属性id，且id属性包含字符串title）

[id*=title]{color: orange;}

二、例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
    </head>
    <style>
        /* 选择含有h1含有id属性 */
        h1[id]{
            color: white;
        }
        [id="author"]{
            color: red;
        }
        /* 以pra结尾的属性选择 */
        [class$="pra"]{
            color: skyblue;
        }
        /* 以af开头的属性选择 */
        [class^="af"]{
            color: brown;
        }
        /* 含有title的属性选择 */
        [id*=title]{
            color: orange;
        }

    </style>
    <body>
        <h1 id="title">回乡偶书</h1>
        <h2 id="title">其一</h2>
        <h2 id="author">贺知章</h2>
        <p class="before pra">少小离家老大回</p>
        <p class="before pra">乡音无改鬓毛衰</p>
        <p class="after">儿童相见不相识</p>
        <p class="after">笑问客从何处来</p>
    </body>
</html>