【小记】css中的伪类和伪元素

伪类 用于向某些选择器添加特殊的效果

伪元素 用于将特殊的效果添加到某些选择器

---

 

css3中规定：

伪类写法：单冒号+伪类

伪元素写法：双冒号+伪元素

css2中规定：

伪类、伪元素都是使用单冒号

（为了兼容，推荐使用单冒号的写法）

• 伪类种类

:active     :focus     :hover    :link     :visited    

:first-child(第一个子元素)    :last-child(最后一个子元素)

.demo li.last {background: green; border: 2px dotted blue;}

:nth-child(3)(某元素下第3个子元素)    

.demo li:nth-child(n) {background: lime;} 

:nth-child(2n)等价于:nth-child(even)(偶数顺序的子元素)       :nth-child(2n+1)（奇数）

.demo li:nth-child(-n+5) {background: lime;}

  :nth-last-child()(从最后一个元素计算，选择特定元素)

.demo li:nth-child(4n+1) {background: lime;}

:nth-of-type()(某一类元素进行选择)

.demo p:nth-of-type(even) {background-color: lime;}

 

• 伪元素种类

:first-letter(首字母)    :first-line(首行)    :before    :after 

.box:after{

        content: "after";

        position: absolute;

        top: -2px;

        left: 200px;

        width: 18px;

        height: 20px;

        background: url("img.png");

        background-size: 100%;

    }