代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器 权重1 */
button {
cursor: pointer;
}
/* 属性选择器 权重11*/
button[disabled] {
cursor: default;
}
/* 属性值等于这个 */
input[type="text"] {
color: pink;
}
/* 以这个开头的 */
div[class^="icon"] {
color: red;
}
/* 以这个结尾的 */
div[class$="cc"] {
color: green;
}
/* 包含这个的 */
div[class*="hh"] {
color: blue;
}
</style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button disabled>按钮</button>
<button disabled>按钮</button>
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<div class="icon1">图标1</div>
<div class="icon2">图标1</div>
<div class="icon3">图标1</div>
<div class="iconcc">图标2</div>
<div class="iconcc">图标2</div>
<div class="iconcc">图标2</div>
<div class="iconhhcc">图标3</div>
<div class="ichhoncc">图标3</div>
<div class="ihhconcc">图标3</div>
</body>
</html>