属性选择器

最新推荐文章于 2024-01-14 11:54:30 发布

深林最里人已无

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量65

点赞数

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

本文链接：https://blog.csdn.net/weixin_56490825/article/details/131781157

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <!-- 属性选择器是通过元素的属性及属性值来选择元素的。 -->

        <!-- 1.作用：选择含有指定属性的元素。  语法：[属性名]{}
        2.作用：选择含有指定属性及指定属性值的元素。语法：[属性名=属性值]{}
        3.作用：选择含有指定属性及指定属性之开头的元素。语法：[属性名^=属性值]{} 
        4.作用：选择含有指定属性及指定属性值结尾的元素。语法：[属性名$=属性值]
        5.作用：选择含有指定属性，只要含有某个属性值的元素。语法：[属性值*=属性名]{} -->
     <style>
        /* 第一种方法：选择含有指定属性的元素。
                语法：[属性名]{} */
        /*选择属性名为title,设置字体颜色红色  */
        [title]{
            color:red;
        }
        /* 第二种用法：选择含有指定属性及指定属性值的元素。
                语法：[属性名=属性值]{} */
        /*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
        [title=ab]{
            color: green;
        }
        /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
                语法：[属性名^=属性值]{}  */
        /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
        [title^=ab]{
            background-color: yellow;
        }
        /* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
                语法：[属性名$=属性值] */
        /* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
        [title$=ab]{
            font-size: 30px;
        }
        /* 第五种用法：选择含有指定属性，只要含有某个属性值的元素。
                语法：[属性值*=属性名]{} */
        /* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */
        [title*=c]{
            background-color: green;
        }
    </style> 
    

</head>
<body>
<h4> -------------------------属性选择器------------------------------------</h4>
    <div>
        <h1 title="a">one</h1>
        <h2 title="ab">two</h2>
        <p title="abc">three</p>
        <p title="abab">five</p>
        <p title="c">six</p>
        <p>zero</p>
    </div>
</body>
</html>