01---Css3属性选择器

最新推荐文章于 2024-04-27 17:15:07 发布

古塔前端

最新推荐文章于 2024-04-27 17:15:07 发布

阅读量72

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_45321331/article/details/106817251

版权

CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一个简单得案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            cursor: pointer;
        }
        /* 属性选择器 */
        button[disabled] {
            cursor: default;
        }
    </style>
</head>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <!-- disabled 禁用按钮得意思,不能点击这个按钮 -->
    <button disabled="disabled">禁用按钮</button>
    <button disabled="disabled">禁用按钮</button>
</body>

</html>

属性选择器使用方法:
标签名[属性名称] {属性样式}
比如 button[disabled] {
cursor:default;
}

选择器	作用
tag[pry]	选择具有pry属性得tag元素
tag[pry=“val”]	选择具有pry属性且值等于val得tag元素
tag[pry^=“val”]	匹配具有pry属性,且值以val开头得tag元素
tag[pry$=“val”]	匹配具有pry属性，且值以vla结尾得tag元素
tag[pry*=“val”]	匹配具有pry属性，且值中含有val得tag元素

tag 是tag name得简写，意思是:标签名
pry 是property得简写意思是: 属性

重点: 属性选择器得权重为10

古塔前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01---Css3属性选择器

一个简单得案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button {
复制链接

扫一扫