css伪类(Pseudo-classes) & after before

anchor伪类

<html>
<head>

<style type="text/css">

a:link {color:#FF0000;} /* 未访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */                          //必须按照这个顺序!

a:focus{{color:#00FF00;}     /*  点击时的伪类 */  

</style>

</head>

<body>

<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释:</b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!</p>
<p><b>注释:</b>在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!</p>

</body>
</html>

Eg:

<style>
.c1:hover p{                                                     //取出类名为‘ c1’的div中的p标签(子标签)
                   color:black;
}

</style>

<div class="c1">
<p>              
</div>

伪类和CSS类

伪类可以与 CSS 类配合使用:


a.red:visited {color:#FF0000;}
 
<a class="red" href="css-syntax.html">CSS 语法</a>

在一个节点前后加节点

<style>
.c3:after{ content:"333"};
cc3:before{ content:"111"};                                          //所有添加的都是行内元素!!!!!

</style>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 7,397评论 1 62
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,860评论 18 139
  • 正文 ▼ 琳琅满目的专柜,陈列着缤纷的香水。 小小一瓶装着香味的液体标着几百,几千,几万的价格,甚至更高。同样都称...
    安清儿阅读 412评论 0 2
  • 写这个题目的时候,我基本已经想好了我要写些什么。令我愕然的是,在想起那些事情的时候,我仍然会止不住的泪流满面。 前...
    刘圈圈Susan阅读 666评论 27 6