css 伪类: 1)a:link , a:visited, a:hover, a:active 2):first-child

css 伪类: 1)a:link , a:visited, a:hover, a:active  2):first-child网址:yii666.com

1. 链接伪类:

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
</style>
</head>
<body> <h2>链接伪类</h2>
<a href="#">伪类链接</a> </body>
</html>

css 伪类: 1)a:link , a:visited, a:hover, a:active  2):first-child

a:link 未访问

css 伪类: 1)a:link , a:visited, a:hover, a:active  2):first-child文章来源地址:https://www.yii666.com/article/758189.html

a:hover: 鼠标放上.

2.CSS2 - :first-child 伪类

例如:  p:first-child  这个表示的是  p 的父元素 的 第一个子元素是 p  ; 如果存在就应用样式, 如果不存在就没有样式.

p:first-child 匹配到:文章来源地址https://www.yii666.com/article/758189.html

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body> <h2>:first-child类</h2>
<div>
<p>这是p1</p>
<div>这是div</div>
<p>这是p2</p> </div> </body>
</html>

css 伪类: 1)a:link , a:visited, a:hover, a:active  2):first-child

p:first-child 没有匹配到:

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body> <h2>:first-child类</h2>
<div>
<div>这是div</div>
<p>这是p1</p>
<p>这是p2</p> </div> </body>
</html>

css 伪类: 1)a:link , a:visited, a:hover, a:active  2):first-child

这是因为  p 元素的 父元素 div 的第一个子元素 是  子 div , 不是 p 元素, 没有匹配到.文章地址https://www.yii666.com/article/758189.html网址:yii666.com<

css 伪类: 1)a:link , a:visited, a:hover, a:active  2):first-child

-----------------------

参考资料:

  1. CSS 伪类 (Pseudo-classes)
  2. CSS 伪类-列表 (Pseudo-classes)
  3. CSS 伪类 和伪元素的区别 (Pseudo-classes)
  4. 总结伪类与伪元素

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png