你的位置:首页 > 网页设计

[网页设计]CSS之伪类


1.

:link                     向未被访问的链接添加样式

:visited                向已被访问的链接添加样式

:hover                  当鼠标悬浮在元素上方时,向元素添加样式

:active                 向被激活的元素添加样式(被点击)

以上四种伪类应用于超链接时,a:hover必须在a:link和a:visited之后,a:active必须在a:hover之后,a:link和a:visited两者的顺序没有规定

1.1 超链接:

<style>a:link{  color:red;  }a:visited{  color:green;  }a:hover{  color:blue;  }a:active{  color:yellow;  }</style><a href="#">pmx-cnblogs</a>

 1.2 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>