首页 > 代码库 > CSS之伪类
CSS之伪类
1.
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:active 向被激活的元素添加样式(被点击)
以上四种伪类应用于超链接时，顺序不能改换
超链接:
<style>a:link{ color:red; }a:visited{ color:green; }a:hover{ color:blue; }a:active{ color:yellow; }</style>
<a href="http://www.mamicode.com/#">pmx-cnblogs</a>
div:
<style>div{ width:100px; height:100px; background-color:red; border:3px solid blue; overflow:hidden; transition:width 1s,height 2s,background-color 1s,line-height 2s,font-size 2s; line-height:100px; text-align:center;}div:hover{ background-color:green; width:300px; height:300px; line-height:300px; font-size:2em}div:active{ color:yellow;}</style>
<div>This is div</div>
正常状态:
鼠标移到div上时的样子:
鼠标左键按下后得样子:
2.
:first-child
p:first-child选择作为某个元素的第一个子元素的p元素，而不是选择p元素的第一个子元素
<style>#myDiv > p:first-child{ background-color:#3C6; }</style><body> <p>p8</p> <div id=‘myDiv‘ style=‘width:300px;height:300px;overflow:auto‘> <p>p1</p> <p>p2</p> <p>p3</p> <div> <p>p4</p> <p>p5</p> </div> </div> <p>p6</p> <p>p7</p></body>
P1作为myDiv的第一个子元素被选中
3.
:focus
向获得焦点的元素添加特殊样式，比如按钮被点击后，文本框输入文本
<style>input:focus{ background-color:yellow; }</style><input type=‘text‘ value=""/>
4.
:lang
向带有指定lang属性的元素添加样式
<style>:lang(zh){ color:red; }</style><p lang="zh">p7</p>CSS之伪类
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。