CSS伪元素及元素的显示与隐藏的学习

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

 伪元素在超链接中的应用

        1.  link         未被访问过的链接样式

      a:link{

            color: red;

        }

        2.  visited     访问过后的样式

            a:visited{

            color: skyblue;

        3.  hover      鼠标悬停时的标签

        a:hover{

            background-color: yellow;

            margin-top: 10px;

        }

        4.  active     鼠标点击时候的样式，不松开

        a:active{

            color: white;

        }

 小提示：  设置超链接样式的时候，必须按照以上的顺序

 focus(聚焦，常用于input 文本框)

        input:focus {

            background-color: green;

            color: white;

        }

元素的显示与隐藏

display属性

display：none 此元素不会被显示。 display：block 此元素将显示为块级元素，此元素前后会带有换行符。

display隐藏元素后，不占有原有位置

visibility 属性

visibility：visible 默认值。元素是可见的。 visibility：hidden 元素是不可见的。

visibility隐藏元素后，保留原有位置

overflow 属性

visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。

实列代码如下：

<style>
	.tudou {
		position: relative;
		width: 444px;
		height: 320px;
		background-color: pink;
		margin: 30px auto;
	}
	.tudou img {
		width: 100%;
		height: 100%;
	}
	.mask {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0, .3) url(bf.jpg) no-repeat center;
	}
	.tudou:hover .mask{
		display: block;
	}
</style>