码迷,mamicode.com
首页 > Web开发 > 详细

css的属性选择器和伪类

时间:2020-06-10 23:01:23      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:head   css   body   href   ack   包含   char   yellow   自己   

<!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的属性选择器和伪类

标签:head   css   body   href   ack   包含   char   yellow   自己   

原文地址:https://www.cnblogs.com/zxy01/p/13089561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!