css学习笔记1

:before,:after伪元素

伪元素特性（目前已经遇到的）

• 它不存在于文档中，所以js无法操作它
• 它属于主元素本身，有些伪类仅仅是代表元素内容的一部分，譬如:first-letter代表第一个字母；因此当伪元素被点击的时候触发的是主元素的click事件
• 块级元素才能有:before, :after，譬如img就不能设置，亦即某些元素是没有:before, :after的，只要知道一般的块级元素都可以用就行了

注：css3中，为了与伪类区分，伪元素前应该使用两个冒号，即:hover伪类，::before伪元素。当然为了向下兼容，用一个冒号也是可以的，不过建议尽量使用规范的写法。

 

下拉图标

a::before{
    width: 4px;
    height: 4px;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    content: "";
    -webkit-transform: rotate(45deg);
    display: block;
}

用纯CSS实现的箭头

http://ourjs.com/detail/532bc9f36922aa7e1d000001

 

用css伪类制作三角形的三种方法（转载）

http://www.jianshu.com/p/345e6fe07009