中软大前端0320-伪类

伪类

格式

选择器 : 伪类名{
属性:属性值
}

常用伪类

  • a:hover 鼠标滑过时的样式
  • a:link 链接没有未访问时样式
  • a:visited 链接访问过后的样式
  • a:active 鼠标点击时的样式

  • p:before 给段落前面添加内容

  • p:after{
    content:””;
    } 给段落后面添加内容

hover要在link和visited之后,active必须在hover之后。
visited访问过后的样式,在页面刷新后不会恢复成link样式。删除浏览器历史记录会重新生成

  • li:nth-child(1) 选择li的第一个子元素,不论是什么元素
  • li:nth-of-type(1)
    选择li的第一个li元素

显示小三角

1
2
3
4
5
6
7
8
9
10
11
12
.info{
width: 0;
height: 0;
border-width: 5px;
border-color: transparent #808080 #808080 transparent; //transparent 透明色,只有一边显示颜色
border-style: solid;
position: absolute;
top: 20px;
left: 50px;
visibility: hidden;
z-index: 1;
}