关于css伪类的一些兼容性测试

测试环境:xp ,ie7~8  chrome。

link 伪类 :(:link,:visited)  这个是链接专用

动态伪类 :(:hover,:active,:focus)

<!DOCTYPE html>
<html>
<head></head>
<style type="text/css">
a:link,input:hover{color:blue;}
a:visited{color:green;}
a:active{color:red;}
a:hover{color:yellow;}
tr:hover,p:hover{background-color:red;}
input:focus,p:focus{background-color:yellow;}
</style>
<body>
<input type="text" />
<a href="http://www.baidu.com">百度</a>
<a href="http://www.google.com">google</a>
<div>test</div>
<table><tr><td>test</td></tr></table>
<p>zhe ye shi test</p>
<input type="checkbox">nan
</body>
</html>

对于链接(a标记)不管是link伪类还是动态伪类,在ie7-8,chrome 都有效果

对于表单元素,ie7 下不支持动态伪类,

ie8下文本框,单选框都支持:focus,

chrome下文本框支持:focus,复选框不支持focus

对于p,tr ,ie7-8,chrome 都只支持:hover。

只是简单测试,欢迎指正

更希望能有朋友提供学习资源

关于css伪类的一些兼容性测试,布布扣,bubuko.com

时间: 2024-12-22 22:59:00

关于css伪类的一些兼容性测试的相关文章

CSS伪类和伪元素的区别

CSS - 伪类和伪元素的区别 本文转载于http://www.cnblogs.com/iceflorence/p/5796083.html 伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它

第十二节课,css伪类 (转)

一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5.名称[表达式] 5.1 E[att] 匹配所有具有att属性的E元素([att]获取所有的定义了att的标签:E[att=val] 匹配所有att属性等于“val”的E元素: 5.2 [att=val] 获取所有定义了att属性并且属性值等于val的标签: 5.3 [att^=val]获取所有定义了att

CSS - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式. 属性 描述 :active 向被激活的元素添加样式 :focus 向拥有键盘输入焦

css伪类和伪元素属性

对css中基本选择器和属性选择器以及伪类选择器做了总结,但是提到伪类,与之相对应的必然是伪元素. 那么,,,二者到底有什么不能说的秘密呢?接下来 先归类下两者 伪类的种类: 伪元素的种类: 两者的使用方法: css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes  伪类 ::Pseudo-elements 伪元素 但因为兼容性问题,现在大部分两者还是统一用单冒号,但抛开兼容性问题,我们书写时应尽量养成良好习惯,区分两者. 二者区别

css伪类和logo部分效果实现

css伪类及logo插入图 关于css的一些小知识点 伪类 伪类的权重与类的权重相同. 伪类有权重,a:link---a:visited---a:hover---a:active 工作中为了用户体验,link和visited状态一样,hover状态不同,active不写. a选择器:color, text-decoration两个属性不能去继承更改. 文字换插入图 background-image背景图片: 重复加载在border以内的区域. background: url(pic.jpg) n

css伪类 伪元素

之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正了我的错误,所以今天打算好好研究下两者的区别.首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些"特殊"的效果.这里特殊指的是两者描述了其他 css 无法

CSS 伪类 学习

(1).链接伪类使用 a:link  {color:pink;} -----未点击的链接 a:visited{color:skyblue;}-----已经点击的链接 a:hover{color:red;}-----鼠标移上去的颜色变化 a:active{color:black;}----选定的链接的颜色变化 Tips: 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才

【从0到1学Web前端】CSS伪类和伪元素

1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 selector.class : pseudo-class {property: value} 如下面的一段代码: a.red : visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syn

超链接标签的CSS伪类link,visited,hover,active

CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有:link,:visited,:hover,:active,而且需要按照这个顺序设置,有个简单的记法是,取首字母组成 love hate,记住“爱恨”就行了. 1,  查看超链接a标签的默认样式 新建一个网页a.html,复制下面的内容: <html> <head> </head&