第二十七课--属性选择器

49 阅读1分钟
a.属性选择器
就是标签中的属性,如title ,name ,等。
使用方式:[属性名称]{}

b.属性和值选择器
就是标签中的属性=值,如title ,name ,等。
使用方式:[属性名称=值]{}

c.属性和值的选择器 - 多值
[属性~=值] { }

d.表单样式
input[type="名称"]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<style>
    [title] {
        color: #2b542c;
    }

    [title=a] {
        color: yellow;
    }

    [title~=b] {
        color: red;
    }

    input[type="text"] {
        width: 150px;
        display: block;
        margin-bottom: 10px;
        background-color: yellow;
    }

    input[type="button"] {
        width: 120px;
        margin-left: 35px;
        display: block;
    }
</style>
<body>
<h1>h1</h1>
<a href="" title="This is a tag">TAG</a>
<a href="" title="a b">This is a a</a>
<p title="b c">This is a a</p>
<h2>h2</h2>
<input type="text">
<input type="button">
</body>
</html>