CSS学习笔记之伪元素选择器

最新推荐文章于 2023-09-18 00:00:20 发布

秋忆夏伤

最新推荐文章于 2023-09-18 00:00:20 发布

阅读量246

点赞数

本文链接：https://blog.csdn.net/qq_29331365/article/details/52471720

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

	<!-- A标签下的：link、visited、hover、active都是伪元素索引器。 -->
	
    <!-- A:link 超链接初始时的状态。 -->
    <!-- A:active 点击超链接时的状态。 -->
    <!-- A:hover 鼠标移动到超链接上时的状态。 -->
    <!-- A:visited 访问过的超链接状态。 -->

    <!-- P:first-line 设置段落第一行。 -->
    <!-- P:first-latter 设置段落第一个字符。 -->
	
    <style type="text/css">
		A:link{
			color:red;					/* 未访问的链接，初始状态。 */
		}
        A:visited
        {
			color:green;				/* 访问过的超链接状态 */
        }
        A:hover							/*       hover必须位于link和visited之后才有效果        */
        {
            color:blue;    				/* 鼠标移动到超链接上时的状态 */	
			font-size:xx-large;
		}
        A:active 						/*       active必须位于hover之后才能生效。    */
        {
            color:yellow;    			/* 点击超链接时的状态。 */
        }
		
        P:first-line				
        {
            font-size:xx-large;    		/* 设置段落第一行为超大字体 */
        }
        P:first-letter
        {
            font-size:xx-small;    		/* 设置第一个字符为超小字体 */
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>

    <p>晋太元中，武陵人捕鱼为业。缘溪行，绕路之远近，<br/>
    忽逢桃花林，夹岸数百步。</p>
</body>
</html>

页面效果：