伪类选择器和伪元素

2019-01-02  本文已影响0人  卑微小利

1.正常链接

x:link{
color:green;
}

2.访问过的链接

x:visited{
color:yellow;
}

注:(只能定义字体颜色,不能定义字号)

3.鼠标滑过的链接

x:hover{
color:skyblue;
}

4.正在点击的链接

x:active{
color:black;
}

5.获取焦点

x:focus{
backgroud-color:orange;
}

6.选中的元素

x::selection{
      background-color:white;
}

兼容火狐浏览器

p::-moz-selection{
        background-color:orange;
}

伪元素

(给段落定义样式)

1.首字母

x:first-letter{
    color:red;
    font-size:30px;
}

2.首行

x:first-line{
      background-color:orange;
 }

3.before(前面)

x:before{
    content:"我在文章的最前面";
    color:skyblue;
}
需要用content(内容)来定义内容

4.after(后面)

x:after{
    content:"我会出现在文章的最后面";
    color:red;
}

上一篇下一篇

猜你喜欢

热点阅读