前端的学习之路：初级CSS---属性选择器

最新推荐文章于 2022-05-16 15:12:39 发布

new-SkyWaller

最新推荐文章于 2022-05-16 15:12:39 发布

阅读量82

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113553400

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

属性选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        /*
    [属性名]选择含有指定属性的元素*/

        /* p[title]{
        color:red;
    }或
    *[tilte]{
        color:red;
    } */

        /* [属性名=属性值]选择含有指定属性名和属性值的元素*/
        /* p[title=abc]{
        color:blueviolet;
    } */

        /*[属性^=属性值]选择属性值以指定值开头的元素*/

        /* p[title^=abc]{
        color:orange;
    } */


        /*[属性$=属性值]选择属性值以指定值结尾的元素*/

        /* p[title$=abc]{
        color:orange;
    } */

        /*[属性*=属性值]选择属性值中含有某值的元素*/

        /* p[title*=abc]{
        color:orange;
    } */
        /*[属性~=属性值]
     例：
     [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val*/
        /* p[title~=abc]{
        color: deepskyblue;
        border: 1px solid;
    } */
        /* 	 [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。 */
        /* p[lang|=en] {
            border:solid yellow 1px;
        } */
    </style>
</head>

<body>

    <p lang="en">Hello!</p>
    <p lang="en-us">Hi!</p>
    <p lang="en-gb">Ello!</p>
    <p title="abc">ff</p>
    <p title="abc g">kaka</p>
    <p title="abc f">gaha</p>
    <p title="abclop">少小离家老大回</p>
    <p title="abcdef">乡音无改鬓毛衰</p>
    <p title="helloabc">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <p>秋水共长天一色</p>
    <p>落霞与孤鹜齐飞</p>
</body>

</html>

** [属性名]选择含有指定属性的元素运行结果为：**
在这里插入图片描述
[属性名=属性值]选择含有指定属性名和属性值的元素运行结果为：

[属性^=属性值]选择属性值以指定值开头的元素运行结果为：

[属性$=属性值]选择属性值以指定值结尾的元素运行结果为：

[属性=属性值]选择属性值中含有某值的元素运行结果为：*
在这里插入图片描述
[attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val

[attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素