<!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>属性选择器</title>
<style>
/*
一、属性选择器：为带有属性的元素指定样式
语法格式一：标签必须包含某属性
标签名[属性名]
*/
input[value]{
background-color: #c7edc7;
}
/*
语法格式二:标签属性必须等于某个值
*/
input[value="哈哈"]{
background-color: #fde6e0;
}
/*css对属性选择器的扩展*/
/*
语法格式三：标签属性以某个值开头
标签名[属性名^=属性值]
*/
div[class^="div"]{
background-color: #dce2f1;
}
/*
语法格式四：标签属性以某个值结尾
标签名[属性名$=属性值]
*/
div[class$="hello"]{
color: red;
}
/*
语法格式五：标签属性必须包含某个值
标签名[属性名*=属性值]
*/
div[class*="d"]{
font-size: 30px;
color:blue;
}
</style>
</head>
<body>
<input type="text"value="呵呵">
<input type="text"value="哈哈">
<div class="div1">我是div</div>
<div class="div2">我是div</div>
<div class="div3">我是div</div>
<div class="d1-hello">我是hello1</div>
<div class="d2-hello">我是hello2</div>
<div class="d3-hello">我是hello3</div>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)