属性选择器

守住⒈份信仰°

于 2020-08-31 19:01:07 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/qq_43648337/article/details/108327244

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

属性选择器（5种）

作用：选中带指定属性的元素
语法：[属性名]
作用：选中含指定属性和属性值的元素
语法：[属性名=属性值]
作用：选中属性值以指定值开头的元素
语法：[属性名^=属性值]
作用：选中属性值以指定值结尾的元素
语法：[属性名$=属性值]
作用：选中属性值中带指定值的元素
语法：[属性名*=属性值]

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        /* (属性选择器1)选中带title属性的p元素 */
        p[title]{}
        /*(属性选择器2) 选中title属性为 a的p元素 */
        p[title=a]{}
        /* （属性选择器3）选择title属性以a开头的元素 */
        [title^=a]{}
        /* (属性选择器4)选择title属性以a结尾的元素 */
        [title$=a]{}
        /* (属性选择器5) 选择title属性带b的元素*/
        [title*=b]{}
    </style>
</head>
<body>
    <!-- title属性，鼠标放动对应文字上会出现一个小标题 -->
    <p title="a">埋头苦干是第一</p>
    <p title="ab">熟能生出百巧来</p>
    <p title="aba">勤能补拙是良训</p>
    <p>一分辛苦一分才</p>
</body>
</html>