通过属性来设置样式

最新推荐文章于 2023-12-06 16:33:07 发布

小皮皮不皮

最新推荐文章于 2023-12-06 16:33:07 发布

阅读量661

点赞数

分类专栏： css

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

/**一般我们都是通过标签或则类名，id名来设置样式，很少会用属性，那么让大家看看用属性来设置得方便的地方，

form表单中经常用的就是input button 了，那么这会儿我们就可以用这个来通过属性给他改变样式了，

/**效果图

*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [title]{
            color: orchid;
        }
        [title=我是h1]{
            border: 1px solid #000000;
        }
        input[type=text]{
            padding-left: 10px;
            color: red;
        }
        input[type=button]{
            color:white;
            background: #2ce942;
            border: none;
            outline:none;
        }
        input[value=我是type]{
            border: 3px solid purple;
        }
    </style>
</head>
<body>
<div title="大家好"> 大家好</div>
<h1 title="我是h1"> 我是h1</h1>
<input type="text" value="我是type为text">
<input type="text" value="我是type">
<span>button按钮清除了默认的样式边框和选中后的蓝色边框效果</span>
<input type="button" value="我是type为button">

</body>
</html>