网页里CSS之伪类

2016/9/14 11:07:07 阅读：1575 发布者：1575

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

上一篇 CSS、js单行、多行文本溢出显示省略号

下一篇网页里的表单Form

网页里CSS之伪类

文章分类

相关新闻

热门标签