伪类
基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果。
-
a:link 规定所有未被点击的链接;
-
a:visited 匹配多有已被点击过的链接;
-
a:active 匹配所有鼠标按下未松开的元素;
-
a:hover 匹配所有鼠标移入/悬停在元素上的元素;
- :focus 被选中的元素;
-
:first-child 元素的第一个子元素;
-
:lang允许创作者来定义指定元素中使用的语言;
伪类的规定:
由于css的优先级问题,下面四个伪类需要按顺序书写,否则会出现问题
L(link)V(visited)H(hover)A(active)
love and hate(爱与恨)
伪类hover的拓展:
- E:hover{} 对自身产生影响;
- E:hover F{} 对子元素F产生影响(当F需要隐藏时)
- E:hover + F{} 对兄弟元素产生影响;
一定要注意用E元素的伪类设置效果的作用对象跟E元素的关系(自身、子元素、兄弟元素)然后使用对应的选择器设置。
伪元素
基于元素的抽象,它跟伪类的区别就是它依赖于元素,其自身可作为一个抽象的元素来使用,行内元素,伪元素使用时要用两个冒号,但为兼容IE只写一个冒号。
- ::before 元素之前
-
::after 元素之后
-
::first-letter 文本的首字母
-
::first-line 文本的首行
伪元素清除浮动:clearfix类
.clearfix{ content: ''; display: block; clear:both; } .clearfix{zoom: 1;}/*兼容IE*/
伪元素设置小三角形:
如上图,消息提示框上前面的小三角形即为伪元素设置,代码如下:
.tips{/*消息框*/ position: relative; width: 180px; padding: 10px; background-color: #56A9D3; border-radius: 4px; } .tips:before{
/*相对于消息框设置位置*/
position: absolute; top: 30%; left: -20px; content: ""; width: 0px; height: 0px; border: 10px solid transparent;/*用border的颜色来设置三角形显示,三边透明*/ border-right-color: #56A9D3; }
一定要注意伪元素需要设置content之后才会显示出来,content: '';设置后才是真正的插入一个内容,即便为空也要设置。