CSS属性选择器

最新推荐文章于 2022-05-06 17:00:00 发布

MockingBird9527

最新推荐文章于 2022-05-06 17:00:00 发布

阅读量508

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_36146275/article/details/54318354

属性选择器的三个属性

1、* 表示包含某个值

a[ name*="num" ]：选择 a 标签中name属性含有“ num ”的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        a[name*="num"]{
            color: red;
        }
    </style>
</head>
<body>
<a name="num1">This is num1</a><br>
<a name="num2">This is num2</a><br>
<a name="num3">This is num3</a><br>
</body>
</html>

2、^ 表示以某个值开头

a[ name^="a" ]：选择 a 标签中name属性以“ a ”开头的标签，Banana含a字母但以B开头，没有被选择。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a[name^="a"]{
            color: red;
        }
    </style>
</head>
<body>
<a name="apple">Apple</a><br>
<a name="banana">Banana</a><br>
<a name="pear">Pear</a><br>
</body>
</html>

3、 $ 表示以某个值结尾

a[ name$="e" ]：选择 a 标签中name属性以“e ”结尾的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
        a[name$="e"]{
            color: red;
        }
    </style>
</head>
<body>
<a name="baidu">BaiDu</a><br>
<a name="google">Google</a><br>
<a name="bing">Bing</a><br>
</body>
</html>