CSS中伪类的使用
原文:http://www.cnblogs.com/guopei/archive/2011/04/16/2017627.html
何为伪类?
也就是实际实现了类的效果,但是并没有实际添加到标签中的类,这样的就是伪类。伪类的典型构成就是使用了(:)冒号。
1.先说最常用的a链接的伪类,目前市场上的主流浏览器都支持。
:link 链接样式
:visited 链接访问过后的样式(只要访问历史记录存在)
:hover 鼠标悬停样式
:active 鼠标按下样式
其中有些规则,需要按着(Love ha)的顺序样式才会生效。
而且这4个伪类不只可以用在a链接上,也可以用在其他元素上,当然最常的是:hover来实现翻转效果,但IE6对于元素的hover不支持,IE7也要在DOCTYPE为strict时,才支持,比如
<style type="text/css">
img:hover{border:1px solid #000;}//IE6不支持
</style>
<img src="data:image/1.png"/>
为了实现兼容可以引入javascript实现
2.Selector:first-child 匹配作为其父元素的第一个子元素的任何元素。(IE7及以上,及其他主流浏览器支持)
Selector:指定的标签名称
嵌入式文本并不被视为文档树的一部分,而且在计算第一个子元素时不会将其计算在内。例如,在以下 HTML 代码中,EM 元素是 P 元素的第一个子元素:
<p>abc <em>default</em> def</p>
在以下示例中,选择器匹配元素UL的第一个子元素LI,给第一个LI添加文字加粗样式 :
<style type="text/css">
li:first-child{font-weight:bold;}
</style>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
在这个示例中,选择器匹配所有.note类下的第一个P元素,给该元素添加文字加粗样式:
<style type="text/css">
.note p:first-child{font-weight:bold;}
</style>
<div class="note">
<p> The first P inside the note. </p>
</div>
<div class="note">
<p> The first P inside the note. </p>
</div>
应用于:A、ABBR、ACRONYM、ADDRESS、B、BIG、BLOCKQUOTE、BODY、CAPTION、CENTER、CITE、CODE、COL、COLGROUP、DD、DFN、DIV、DL、DT、EM、FORM、HN、HTML、I、IMG、INPUT、LI、OL、P、S、SELECT、SPAN、SUB、TABLE、TBODY、TD、TFOOT、TH、THEAD、TR、TT、U、UL、VAR、XM
3.Selector:first-letter 设置对象内第一个字符的样式(IE7及以上,及其他主流浏览器支持)
:first-letter 此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定position属性为absolute,或者设定display属性为block。
伪元素可用于创建常见的印刷效果,例如首字大写。在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。
此示例实现首字大写,内联对象改变position之后也可以应用该伪类。
<style type="text/css">
p:first-letter{font-size:200%;}
span:first-letter{font-size:24px;}
span{position:absolute;}
</style>
<p>此伪对象仅作用于块对象。</p>
<span>Test!!!</span>
此示例实现首字下沉效果
<style type="text/css">
p:first-letter{font-size:200%;float:left;}
span:first-letter{font-size:24px;}
span{position:absolute;}
</style>
<p>此伪对象仅作用于块对象。</p>
<span>Test!!!</span>
4.Selector:first-line 设置对象内第一行的样式(IE7及以上,及其他主流浏览器支持)
:first-line 此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定position属性为absolute,或者设定display属性为block。
如果未强制指定对象的width属性, 首行的内容长度可能不是固定的。
.newsitem:first-line {font-size: 14pt;}
.newsitem{width:200px;}
<div class="newsitem">New features in Internet Explorer 5.5 include
the first-line pseudo-element. This allows authors to create
typographical effects that are applied to the first line of a block
of text.</div>
5.selector:focus 设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式表属性。 (IE8及以下不支持,其他主流浏览器支持)
<style type="text/css">
input:focus{border:2px solid red}
</style>
<input type="text" value="请输入"/>
6.selector:before,selector:after 用来和 content 属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容,也就是在对象前、后添加指定的文本。(IE8及以下不支持,其他主流浏览器支持)
<html>
<head>
<style type="text/css">
p:before{content:url('image/log.png')}
p:after{content:'这是一段话的结束!'}
</style>
</head>
<body>
<p>目前还没有互动观点,输入您的互动观点。</p>
</body>
</html>
因为搜索引擎不会收录伪元素生成的内容,所以使用时需要注意
7.还有其他4种伪类:first,:left,:right,:lang。
:lang 设置对象使用特殊语言的内容样式表属性
:first 设置页面容器第一页使用的样式表属性。仅用于@page规则,应用于媒体如打印,而不是在浏览器中显示内容
:left 设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则,应用于媒体如打印,而不是在浏览器中显示内容
:right 设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则,应用于媒体如打印,而不是在浏览器中显示内容
这些伪类使用范围很窄并且也没有获得浏览器的一致支持。
CSS中伪类的使用的更多相关文章
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- css中伪类和伪元素的区别
转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
- css中伪类与伪元素的区别
一:伪类:1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪 ...
- day20—CSS中伪类:before与:after的应用:
转行学开发,代码100天——2018-04-05 CSS中的两个伪类:before和:after适合应用与在元素的开始或者结尾处添加修饰性文字或外观,实现内容添加的同时并没有破坏HTML代码 语义.如 ...
- css中伪类/伪元素详解
一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...
- css中伪类和伪元素
伪类和伪元素时对那些我们不能通过class.id等选择元素的补充 伪类的操作对象是文档树中已有的元素(可以给已有元素加了一个类替代),而伪元素则创建了一个文档数外的元素(可以添加一个新元素替代) CS ...
- CSS 中伪类的顺序
因为css渲染方式的关系: 快速记忆方法:LoVe HAte 原则: L:link V:vistered H:hover A:active li :link { color: greenyellow; ...
随机推荐
- eclipse中如何导入jar包
如图,首先右键点击项目,选择最下面的properties, 然后进去之后点击java build path,右边会出来4个选项卡,选择libraries, 这时候最右边会有多个选项,第一个add ja ...
- 配置was7、并部署发布项目!
1:进入服务器,选择WebSphere Application Server,进入server1,右侧进入服务器基础结构,进入java和进程管理,进入进程定义 2:在页面左边菜单中选择java虚拟机, ...
- Lang语言包
\languages\zh_cn\admin\common.php里配置后台所有常量
- AngularJs 【使用】 -- ng-repart 排序使用
1.单字段 ng-repeat="item in dataList | orderBy:'field' " 2.多字段 ng-repeat="item in dataLi ...
- 查看 yum 安装软件包的路径
yum:列出已安装的安装包 [root@localhost ~]# yum list | grep mysql akonadi-mysql.x86_64 1.9.2-4.el7 base apr-ut ...
- 将MYSQL查询导出到文件
sql文件: set names utf8; select * from xxxxx mysql命令: mysql .sql .txt
- Win7 下用 VS2015 编译最新 openssl(1.0.2j)包含32、64位debug和release版本的dll、lib(8个版本)
Win7 64位系统下通过VS2015编译好的最新的OpenSSL(1.0.2j)所有八个版本的链接库, 包含以下八个版本: 1.32位.debug版LIB: 2.32位.release版LIB: 3 ...
- 【HDOJ】1310 Team Rankings
STL的应用,基本就是模拟题. /* 1410 */ #include <iostream> #include <string> #include <algorithm& ...
- 【HDOJ】1438 钥匙计数之一
状态压缩.分最后一个槽的值以及当前的配置方案是否可以进行DP. /* 1438 */ #include <cstdio> #include <cstring> #include ...
- HPROF学习
抓取HPROF log 1. GUI 可以通过 adt-bundle-windows-x86_64-20140702\sdk\tools\monitor.bat来抓取. 打开软件,选中相应的包,比如“ ...