CSS 常用伪类

锚伪类

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link {color: #FF0000}    /* 未访问的链接 */

a:visited {color: #00FF00}    /* 已访问的链接 */

a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */

a:active {color: #0000FF}    /* 选定的链接 */

例子

<html>

<head>

<style type="text/css">

a.one:link {color: #ff0000}

a.one:visited {color: #0000ff}

a.one:hover {color: #ffcc00}



a.two:link {color: #ff0000}

a.two:visited {color: #0000ff}

a.two:hover {font-size: 150%}



a.three:link {color: #ff0000}

a.three:visited {color: #0000ff}

a.three:hover {background: #66ff66}



a.four:link {color: #ff0000}

a.four:visited {color: #0000ff}

a.four:hover {font-family: monospace}



a.five:link {color: #ff0000; text-decoration: none}

a.five:visited {color: #0000ff; text-decoration: none}

a.five:hover {text-decoration: underline}

</style>

</head>



<body>

<p>请把鼠标移动到这些链接上,以查看效果:</p>



<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>

<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p>

<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p>

<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p>

<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p>

</body>



</html>

 


first-child 伪类

您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说明。考虑以下标记:

<html>

<head>

<style type="text/css">

p:first-child {

  color: red;

  } 

</style>

</head>



<body>

<p>some text</p>

<p>some text</p>

</body>

</html>

运行结果:

some text

some text

你可能感兴趣的:(css)