我是有链接的a_伪元素选择器没访问的颜色">
赞
踩
学的越多,没学的越多;永远不要停下前进的脚步。
状态行伪类:
<div></div>
<a>我是没有链接的a</a>
<a href="">我是有链接的a</a>
div{ width: 200px; height: 200px; background-color: red; } /* 当鼠标在div 上时,红变蓝 */ div:hover{ background-color: blue; } /* 鼠标击中,变为 粉色 */ div:active{ background-color: hotpink; } /* 已被访问过的颜色 */ a:visited{ color: lawngreen; } /* 未被访问时的链接 */ a:link{ color: hotpink; }
结构性伪类:
before和after中必须设置content(内容)和display(种类)两个样式,否则无法正确显示
display:修改元素种类,block(区块元素)、inline(内联元素)、inline-block(内联块元素)、none(隐藏元素,且不占用物理空间)
content:伪元素的内容样式,值会在页面中显示出来
<div>
我是div内容
</div>
div{ width: 200px; height: 200px; background-color: lightpink; } /* 伪元素何时使用:希望页面中有一个元素结构用来显示样式或者额外消失时,用尾元素来代替 */ div::before{ display: block; content: "*"; width: 30px; height: 30px; background-color: lightseagreen; } div::after{ content: "ii"; }
当鼠标移入父元素的时候,子元素消失;移出时,子元素出现
way1:
<div class="parent">
<div class="child"></div>
</div>
.parent{ width: 300px; height: 300px; background-color: limegreen; margin: 0 auto; } .child{ width: 50px; height: 50px; background-color: violet; margin: 0 auto; } /* 移入时 子元素消失;移出,出现 */ .parent:hover .child{ display: none; }
way2:
<div class="parent"></div>
.parent{ width: 300px; height: 300px; background-color: violet; margin: 0 auto; } .parent::before{ content: ""; width: 100px; height: 100px; background-color: yellow; display: block; } .parent:hover::before{ display: none; }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。