<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*[id=‘id1‘]{*/
/* background: #fac237;*/
/*}*/
/*区分标签下选择*/
/*p[class=‘class1‘]{*/
/* background: #5fb57d;*/
/*}*/
/*自造属性选择*/
/*[zxy]{*/
/* background: #036ad2;*/
/*}*/
/*.class1{*/
/* font-size: 45px;*/
/*}*/
/*.class2{*/
/* background: #036ad2;*/
/*}*/
/*~=*/
/*[class~=‘class2‘]{*/
/* background: #036ad2;*/
/*}*/
/*^ 以谁开始 */
/*[class^=‘class1‘]{*/
/* font-size: 45px;*/
/*}*/
/*^ 包含 */
/*[class*=‘s1‘]{*/
/* font-size: 45px;*/
/*}*/
a:link{
color: red;
}
/* 悬浮时 */
a:hover{
color: yellow;
}
/* 点击链接时 */
a:active{
color: purple;
}
/*访问连接后*/
a:visited{
color: chartreuse;
}
/* 后面添加文本 */
p:after{
content: ‘ppp‘;
color: #fac237;
}
/*前面添加文本*/
p:before{
content: ‘kkk‘;
}
</style>
<body>
<!--<!– <div class="class1 class2">div1</div> # 有两个属性–>class1 class2-->
<!-- <p class="class1">p1</p>-->
<div class="class1 class2">div1</div>
<p class="class1">p1</p>
<!-- <div class="class2" zxy="hh">div2</div> # 自己造属性 zxy-->
<div class="class3">div3</div>
<div id="id1">id1</div>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
css的属性选择器和伪类