书写css伪类时冒号后多个空格导致该规则失效
发布时间：2011-01-12 21:44:54 作者：佚名 
我要评论
我要评论相信多数开发者不会多个空格。是偶然发现的，网上多数css格式化将压缩后的css格式化后会发生这个情况。
css格式化
https://www.jb51.net/tools/cssyasuo.shtml
格式化后会多出个空格，多出空格后样式规则失效了。
<!DOCTYPE html>
<html>
<head>
<title>书写css伪类时冒号后多个空格导致该规则失效</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
<style type="text/css">
a:link{color : gray;}
a:visited{color : red;}
/* 冒号后多了个空格 */
a: hover{color : yellow;}
</style>
</head>
<body>
<a href="http://www.sina.com">sina</a>
</body>
</html>
推荐使用工具YUI Compressor 、Closure Compiler Google出品的JavaScript优化器或者 CSSTidy等离线工具，直接在线操作不仅可压缩js也可以压缩css。
https://www.jb51.net/tools/cssyasuo.shtml
格式化后会多出个空格，多出空格后样式规则失效了。
复制代码
代码如下:<!DOCTYPE html>
<html>
<head>
<title>书写css伪类时冒号后多个空格导致该规则失效</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
<style type="text/css">
a:link{color : gray;}
a:visited{color : red;}
/* 冒号后多了个空格 */
a: hover{color : yellow;}
</style>
</head>
<body>
<a href="http://www.sina.com">sina</a>
</body>
</html>
推荐使用工具YUI Compressor 、Closure Compiler Google出品的JavaScript优化器或者 CSSTidy等离线工具，直接在线操作不仅可压缩js也可以压缩css。
相关文章
- 在处理css的机制上，IE总是有很多让人吐血的举动，但对于他们现在的改进力度还是值得高兴的。2009-12-08
- 写这篇文章的起因来自与毅博客的《美化段落文本 2》，在这篇文章的最后振之谈到了关于:first-letter这样的伪类元素的特点.2009-09-22
- css伪类伪元素域高级选择器的介绍，需要的朋友可以参考一下2013-02-26
- CSS中存在一些比较特殊的属性，称之为伪类,它们之中最常用的就是定义链接的伪:link，:visited，:hover，:active等本文详细介绍一下after的用法的用法，感兴趣的朋友可以了2013-02-01
csshover.htc在IE7下使用:active伪类无效解决方法
相信做前端开发都知道，IE6、IE7都不支持:active伪类，IE6更甚，连:hover伪类都不支持。为了解决这个问题，一般都会引入一个csshover.htc文件来解决,本文将介绍解决此问题2012-12-24ie6不支持hover ie6 标签(除a标签)不支持伪类:hover解决方案
ie6环境下好多的标签除a标签都不支持伪类:hover，本人很是疑惑，于是搜集整理一番，晒出来和大家分享，希望对你们有帮助2012-12-21CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解:before 伪元素在元素之前添加内容;after 伪元素在元素之后添加内容;有需要了解的朋友可以参考一下2012-12-18- CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。本文将详细介绍经常用于定义链接样式的四个伪类,需要的朋友可以参考下2012-12-10
- 上面是伪类的正确顺序，简称 lvha(love-ha)。你一直知道这个顺序但是为什么这样呢？原理是怎么样的？2011-07-22
链接伪类（:hover）CSS背景图片有闪动BUG的解决方法
IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。2011-04-28
最新评论