css伪类与伪元素:
一:伪类
注意: love/hate
首先伪类的特殊性(应用优先级)是同样的,所以后出现的伪类会覆盖先出现的伪类(同时激活)
lvha 规则是由于CSS特殊性导致,css特殊性有一个按顺序的规则(同一条css规则,后出现会覆盖前面的同样规则)
比如把hover放在active后面,那么实际你在激活(active)链接的时候就触发了hover伪类,hover在后面覆盖了active的颜色,所以始终无法看到active的颜色
如果把visited放在hover的后面,那么已经访问过的链接始终触发visited伪类,根据第一条会覆盖hover里面的颜色。
其实 link visited 这两个伪类,并不需要顺序关系。(他们两的位置可以交换)
二:伪元素 最好用 ::
这几个使用最多的是:before 和 :after
so let us take practice:
.test{
position:relative;
width: 150px;
height: 36px;
border-radius: 5px;
border: 1px solid #000;
background-color: red;
}
.test::before{
content:"";
display: block;
position: absolute;
width: 0;
height: 0;
left: -20px;
top:10px;
border: 10px transparent solid;
border-right-color:green;
}
产生了聊天框效果;其中父相对,子绝对;
go on
.test1{
position: absolute;
width: 150px;
height: 36px;
border: black 1px solid;
border-radius: 5px;
background: red;
}
.test1::before,.test1::after{
content: "";
display: block;
position: absolute;
top: 8px;
width: 0;
height: 0;
border: 6px transparent solid;
}
.test1::before{
left: -11px;
border-right-color:green;
z-index: 1;
}
.test1::after{
left: -12px;
border-right-color:blue;
z-index: 0;
}
利用:before 和:after 实现小三角加一个1px边框,z-index设置重叠样式,有图有真相;
继续:
/*css*/
.test-div{
position: relative;
width: 300px;
height: 120px;
padding: 20px 10px;
font-weight: bold;
}
.test-div::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background:pink;
z-index: -1;
}
/* div*/
<div class="test-div">
<table>
<tr>
<td>name</td>
<td><input placeholder="name"></td>
</tr>
<tr>
<td>pass</td>
<td><input placeholder="pass"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="login"></td>
</tr>
</table>
</div>
so easy!
last:顺便介绍下 ::selection
1. ::selection 只能设置俩个值:background ,color;
2. 选择网站文本都是深蓝的背景,白色的字体,就如下本站的而言,选择文本后,背景是深蓝色,而选中的文本就是白色
w3cplus有过解释:http://www.w3cplus.com/content/css-selection
好了今天的css复习到此为止啦!