CSS综合-伪类伪元素(12-2)
2019-05-06 本文已影响0人
饥人谷1904_陈俊锋
饥人谷学习第12天
伪类
用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化
伪类列举.png
应用-自定义checkbox
今天的心情: <input type="checkbox">
<style>
input[type=checkbox]{
-webkit-appearance: none;
appearance: none;
background: url(http://cdn.jscode.me/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 0 0 no-repeat;
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
vertical-align: middle;
outline: none;
}
input[type=checkbox]:checked{
-webkit-appearance: none;
appearance: none;
background: url(http://cdn.jscode.me/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png) 0 0 no-repeat;
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
vertical-align: middle;
}
</style>
参考笔记资料：
饥人谷book
伪元素
用于创建一些不在文档树中的元素，并为其添加样式
伪元素列举.png
: before : after
- element:before 在element内部创建一个行内元素，作为element的第一个孩子
- element:after 在element内部创建一个行内元素，作为element的最后一个个孩子
- 用:before :after 的目的是为了省标签
- 其中content 是必不可少
应用-清除浮动
.clearfix:after {
content:"";
display:block;
clear:both;
}
应用-替代标签
替代标签.PNG
<div class="tooltip">
<span class="caret"></span>
hi, 这里是饥人谷
</div>
<div class="bubble">hi, 这里是饥人谷</div>
<style>
.tooltip,
.bubble{
position: relative;
padding: 10px;
border-radius: 3px;
background: #fff;
border: 1px solid #000;
display: inline-block;
}
.tooltip .caret,
.bubble:before{
width: 10px;
height: 10px;
border-left: 1px solid #000;
border-top: 1px solid #000;
background: #fff;
display: inline-block;
transform: rotateZ(45deg);
position: absolute;
top: -6px;
}
.bubble:before{
content:''
}
</style>
字体图标
<link rel="stylesheet" type="text/css" href="http//at.alicdn.com/t/font_nyta5x5h650cnmi.css">
<span class="iconfont icon-jirengulogojichu2"></span> [代码](http://js.jirengu.com/bazi/1/edit?html,output)
