css的属性选择器和伪类

<!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>

<!--&lt;!&ndash; <div class="class1 class2">div1</div> # 有两个属性&ndash;&gt;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的属性选择器和伪类

上一篇:【车间调度】基于遗传算法实现产品自动排序问题matlab源码


下一篇:fastjson<=1.2.47-反序列化漏洞-命令执行-漏洞复现