<!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 type="text/css">
/* 全部匹配 */
* {
padding: 0px;
margin: 0px;
list-style: none;
}
img {
width: 200px;
height: 200px;
border: 5px solid green;
}
/*匹配属性存在的 最后一个不会被匹配到*/
img[alt] {
border: 5px solid red;
}
/*匹配属性值存在的最后一个会被匹配*/
img[class] {
border: 1px solid #000;
}
/*精确匹配 alt为hello的都会被匹配到*/
img[alt="hello"] {
border: 5px solid pink;
}
</style>
</head>
<body>
<img src="/Users/macbookair/Desktop/picture/0.jpg" alt="hello">
<img src="/Users/macbookair/Desktop/picture/1.jpg" alt="ickt">
<img src="/Users/macbookair/Desktop/picture/2.jpg" alt="hello">
<img src="/Users/macbookair/Desktop/picture/3.jpg" class="">
<hr>
<style type="text/css">
div {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 4px solid pink;
margin: 10px;
float: left;
font-size: 15px;
overflow: hidden;
}
/*匹配确定属性值
*/
div[class="hello"] {
border: 5px solid red;
}
/*匹配class的值是以hello开头的
1和6被选中
匹配hello或者hello-开头的
*/
div[class|="hello"] {
background: skyblue;
}
/*匹配包含hello
1 2 3被选中
hello必须单独存在(空格隔开)
*/
div[class~="hello"] {
background: orange;
}
/*匹配hello开头的
1 2 4 6 8
凡是开头有hello的,不管后面是什么都会被选中
*/
div[class^="hello"] {
background: red;
}
/*匹配以hello结尾
1 3 5 7 9
凡是结尾有hello的,不管前面是什么都会被选中
*/
div[class$="hello"] {
background: blue;
}
/*包含hello的
全部都有
*/
div[class*="hello"] {
background: purple;
}
/*选取属性值*/
div[ick="heslay"] {
border: 5px solid #000;
}
/*选取多个属性值*/
div[class*="hello"][ick="heslay"] {
background: brown;
}
</style>
<div i=1 class="hello" ick="heslay">hello</div>
<div i=2 class="hello ickt">hello ickt</div>
<div i=3 class="ickt hello">ickt hello</div>
<div i=4 class="helloickt">helloickt</div>
<div i=5 class="ickthello">ickthello</div>
<div i=6 class="hello-ickt">hello-ickt</div>
<div i=7 class="ickt-hello">ickt-hello</div>
<div i=8 class="hello_ickt">hello_ickt</div>
<div i=9 class="ickt_hello">ickt_hello</div>
</body>
</html>
<css3-新增样式选择器>
最新推荐文章于 2023-07-29 17:04:43 发布