css权威指南(第三版) 第二章

1.伪类选择器
定义:已访问和未访问的,这些留恋其历史为伪类,使用这些选择器成为伪类选择器
实现链接伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{color: red}
        a:visited{color: red}
        a:hover{color: red}
        a:active{color: red}
    </style>
</head>
<body>
       <a href="http://www.baidu.com">点击链接</a>
</body>
</html>

2.25设置文章首字母样式

<style>
        h2:first-letter{ color:red; }
        p:first-letter{ font-size: 200%; }
    </style>
</head>
<body>
     <h2>
         这是伪元素选择器
     </h2>
     <p>这是文章标题</p>
</body>

显示结果
这里写图片描述
2.26让文章第一行变为紫色等多种样式
p:first-line{ color: yellow; }

<style>
        h2:first-letter{ color:red; }
        p:first-line{  color: yellow; }
    </style>
</head>
<body>
     <h2>
         这是伪元素选择器
     </h2>
     <p>这是文章标题<br>
         jfajsdjfjsdfde
     </p>
</body>
发布了13 篇原创文章 · 获赞 5 · 访问量 493

猜你喜欢

转载自blog.csdn.net/qq_39696115/article/details/79003181