伪类实例

原创 2008年09月28日 13:23:00

 <html>
<head>
<title>CSS伪类 pseudo-class</title>
<style type="text/css">
a:link {color: #FF0000}     /* 未被访问的链接 红色 */
a:visited {color: #00FF00}  /* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00}   /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF}   /* 鼠标点中激活链接 蓝色 */
</style>
</head>

<body>

<a href = "http://www.baidu.com">搜索你想要的!</a>

</body>
</html>

 

设置对象内的第一行的样式表属性
此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的heightwidth属性,或者设定position属性为absolute,或者设定display属性为block。
如果未强制指定对象的width属性, 首行的内容长度可能不是固定的。
 
示例:
 
p a:first-line { color: green }
div:first-line { color:red;font-size:16px; }

设置对象内的第一个字符的样式表属性
此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的heightwidth属性,或者设定position属性为absolute,或者设定display属性为block。
在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。
 
示例:
 
p a:first-letter { color: green }
div:first-letter { color:red;font-size:16px;float:left; }

伪类选择器之动态伪类:美化1按钮实例

美化按钮             .download-info{             text-align: center;         }         /*默认状态下的效果*...
  • bing_JavaScript
  • bing_JavaScript
  • 2016年08月09日 21:24
  • 280

超级链接伪类应用实例

摘自《网页开发手记》 1、效果图: 2、html代码: 超级链接伪类 ...
  • dszgf5717
  • dszgf5717
  • 2015年07月25日 01:23
  • 211

使用JavaScript修改伪类样式的方法

欢迎来到Altaba的博客 2017年2月19日 项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式,但是我们都知道JavaScript或jQuery...
  • Altaba
  • Altaba
  • 2017年02月19日 16:11
  • 1425

伪类:after清除浮动的原理和方法

浮动元素容器的clearing问题 1. 问题的由来 有这样一种情形:在一个容器(container)中,有两个浮动的子元素。                 在浏览器中一运行,就会出现意想不...
  • NNNaix
  • NNNaix
  • 2017年02月03日 22:04
  • 12933

JQ中 :not .not 伪类与方法之间的选择

$('#news tr:nth-child(even)').addClass('alt'); 与 $('#news').find('tr:nth-child(even)').addClass('alt...
  • liuboman
  • liuboman
  • 2016年02月22日 14:50
  • 733

CSS入门伪类,锚伪类,伪类子对象选择

伪类语法: 冒号后面的 选择器:伪类{属性:值.....} 锚伪类: a:link{color:#ff00ff} 表示未访问的链接 a:visited{color:#00ff00} 表示已访问的链接 ...
  • u011333814
  • u011333814
  • 2014年01月28日 23:57
  • 1144

伪类和伪元素的区别

个人的关注点可能主要集中在js方向上,但是本着css也不能丢掉的原则,所以上网查了些css方面的困惑点,这一篇的主题是:伪类和伪元素。 伪类和伪元素的根本区别在于:它们是否创造了新的元素(抽...
  • z905951024
  • z905951024
  • 2016年03月17日 11:18
  • 2895

伪类元素无法给定事件

例如:div:after 这样的伪类元素 不能够绑定事件。
  • Manarola
  • Manarola
  • 2016年08月01日 15:45
  • 392

css笔记-img-a-伪类

img 1:单标签 行间元素,默认表现inline-block效果,直接适用盒子模型 img标签不是直接在网页中插入图像,而是指定一个链接图像文件的地址。因此 img标签创建的是被引用图像的占位空间 ...
  • tz_gx
  • tz_gx
  • 2016年11月07日 23:15
  • 746

浅谈CSS伪类和伪元素及CSS3新增伪类

p:first-of-type 选择属于其父元素的首个元素的每个元素。 p:last-of-type   选择属于其父元素的最后元素的每个元素。 p:only-of-type   选择属于其父元...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年02月28日 17:09
  • 2390
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:伪类实例
举报原因:
原因补充:

(最多只允许输入30个字)