例子:
<div> class="footer-wechat" /*引入一张图片*/
<dic></div> /*用于显示二维码照片*/
</div>
.footer-wechat { background-image:url('img/footer-wechat.png')} /*引入一张图片*/
.footer-wechat div t{display:none; background-image:url('img/footer-wechat.png')}
隐藏,悬停才显示
目标:
1. 鼠标悬停外侧div,当前div引入图片替换 .footer-wechat:hover { background-image:url('img/footer-wechat2.png')}
2. 控制当前div的子级div从显示到不现实 .footer-wechat:hover div{display:block;}
伪元素 选择器::伪元素{属性名:属性值;}
很像伪类,唯一的区别:两个::
作用:指定元素的某些部分设置样式
例子 ::first-line改变段落的第一行文字样式
5个 mozilla有实验性不要使用的图标
::before ::after
::first-line
::first-letter
::selection
::before 为匹配元素添加第一个子元素(在元素前面插入内容content:包括文字和图片,还有字体)
::after
一个冒号也能用?!答: css2伪元素用: css2.1用::
content属性:
用于为::before ::after添加指定内容
none值 表示不添加任何内容
normal值 类似none
text值 表示普通文本内容跟
url:表示引入一个外部资源
::first-letter 第一个字母/汉字
::first-line
//webstorm提供用于测试的文本内容: lorem + TAB
用h不行,得用p
::selection
作用:匹配指定元素文本内容中被高亮的部分,html被鼠标选中的高亮的文本