【零基础学习web前端】CSS-伪类（:focus、:first-child、:link、:visited）

Amy

【零基础学习web前端】CSS-伪类（:focus、:first-child、:link、:visited）

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

:focus
当我们需要让点击之后的元素一直拥有某些样式，这时用:active就不行了，因为松开鼠标样式会消失。:focus可以用在<input>标签上。

[CSS] 纯文本查看 复制代码

input{
    width: 200px;
    height: 30px;
    border: 1px solid #999;
    border-radius: 3px;
    outline:none;
}
input:focus{
    border: 2px solid red;
}

[HTML] 纯文本查看 复制代码

<div>
        <span>姓名</span>
        <input type="text">
    </div>

点击前和点击后的效果：
、
:first-child
对元素的第一个子元素添加样式，对其他元素没有影响。

[CSS] 纯文本查看 复制代码

ul li:first-child{
    color: red;
}

[HTML] 纯文本查看 复制代码

<ul>
        <li>苏飞论坛1</li>
        <li>苏飞论坛2</li>
        <li>苏飞论坛3</li>
        <li>苏飞论坛4</li>
    </ul>

:link
未被访问的链接
:visited
已访问的链接

[CSS] 纯文本查看 复制代码

a:link {color:black}		/* 未访问的链接 */
a:visited {color: red}	/* 已访问的链接 */

代码表示为未被访问过的链接是黑色，访问过之后变为红色。
提示：

• 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
• 伪类名称对大小写不敏感。
  

liu

强烈支持楼主ing……

站长苏飞

我只是路过打酱油的。

竹林风

这个我用过，再温习一下

惜

好的后台  一定要理解前端

范范

强烈支持楼主ing……