`
zhouyrt
  • 浏览: 1186700 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

书写css伪类时冒号前或后多个空格导致该规则失效

阅读更多

相信多数开发者不会多个空格。
是偶然发现的,网上多数css格式化将压缩后的css格式化后会发生这个情况。

搜“css格式化”,以下网站

http://www.jb51.net/tools/cssyasuo.shtml
http://www.ttmouse.com/geshi.html

格式化后会多出个空格,多出空格后样式规则失效了。

 

<!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>

 

 

 

 

0
0
分享到:
评论
2 楼 libmw 2010-12-08  
这个应该是格式化工具的bug吧
1 楼 暴走的酱油瓶 2010-12-07  
冒号前有空格,也不行

相关推荐

    纯CSS3伪类实现icon标签效果

    以前我还是比较忽视这两个家伙的,今天第一次见到原来伪类的好处这么多,以后会多多推荐CSS3伪类实现的效果 使用方法: 1、将head中的CSS样式引入到你的网页中 2、在你需要变成标签的html处增加class = ...

    css中利用伪类做播放效果

    此外,这种技术也可以与其他CSS伪类结合起来使用,比如使用:focus伪类来实现点击后的效果,或者使用:active伪类来增加鼠标按下的反馈效果,从而进一步丰富用户的交互体验。 CSS中的:hover伪类是一种非常实用的技术...

    css动画 伪类基础使用实例

    伪类是CSS中用于选择元素的特定状态,如`:hover`(鼠标悬停时)、`:active`(被激活时,如按键或点击)和`:focus`(获得焦点时)。它们可以用来改变元素在特定条件下的样式,提高用户体验。 例如,创建一个鼠标悬停...

    CSS:CSS伪类与伪元素教程.docx

    CSS:CSS伪类与伪元素教程.docx

    书写高效的CSS

    ### 书写高效的CSS #### 概述 在Web开发领域,CSS(层叠样式表)是一种用于描述HTML或XML文档的外观和格式的语言。随着Web技术的发展与网站复杂度的提升,编写高效的CSS成为了前端工程师的一项必备技能。本文将...

    css-div的border属性使用&伪元素伪类.docx

    例如,当四个边框的宽度和颜色都相同时,会形成一个规则的正方形边框。如果仅设置部分边框,如只设置左边和下边,可以创建出类似三角形的效果,就像第二个示例中那样。 此外,伪元素`::before`和`::after`被用来...

    提升你的CSS技能:深入理解伪类选择器和伪元素选择器

    比如,在书写伪类选择器时,必须按照一定的顺序来避免出现选择器失效的情况。同时,理解各种伪类和伪元素选择器的特性和适用场景,有助于在复杂的页面设计中做出恰当的选择,使得CSS代码更加高效和优雅。伪类选择器...

    css书写代码要求规范

    - **多选择器独占一行**:[强制] 当一个规则包含多个选择器时,每个选择器声明必须独占一行。 ```css .post, .page, .comment { line-height: 1.5; } ``` - **特殊选择器空格**:[强制] `&gt;`、`+`、`~`选择器...

    09_伪类-动态伪类.html

    :focus伪类用于当元素获得键盘输入焦点时改变元素的样式,比如输入框在用户点击或使用Tab键切换到该输入框时。:active伪类则用于激活状态,通常是指用户在元素上单击鼠标按钮的短暂时间内的样式。 此外,还有一些...

    ASP.NET 2.0中CSS失效的问题总结

    ASP.NET 2.0 中CSS失效的问题涉及到多个层面,这些情况可能会导致网页样式无法正常显示。以下是关于这些问题的详细分析及解决策略: 1. **CSS文件路径不正确**: 当CSS文件路径设置为相对路径时,如果内容页与母版...

    CSS 伪类(Pseudo-classes)

    CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} ...

    中国移动CSS编码规范

    - **列表型属性值:** 在单行书写时,逗号后必须跟一个空格。例如: ```css font-family: Arial, sans-serif; ``` **2.4 行长度** - **每行不超过120个字符:** 为了提高代码的可读性,建议将每行限制在120个...

    两种CSS3伪类选择器详细介绍

    css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...

    不规则形状排列的css菜单导航.zip

    5. **伪类和伪元素**:如`:hover`、`:active`和`:focus`等伪类,用于在特定状态(如鼠标悬停、点击或获得焦点时)改变元素的样式。这在创建交互式菜单时特别有用。 6. **自定义形状**:使用`clip-path`、`mask`或者...

    Eric Meyer谈css.pdf

    当有多个规则应用于同一个元素时,特异性高的规则将覆盖特异性低的规则。 对于CSS的高级技术,如继承、层叠、权重计算等,也是CSS学习中的重要部分,理解这些概念对于解决样式冲突和优化样式表都是非常有帮助的。 ...

    sonar-Web_Css检查规则指南.docx

    `calc()`函数用于执行计算,运算符(+,-,*,/)周围需要适当的空格或换行,否则解析器可能无法正确解析表达式,导致样式失效。 1.4 `linear-gradient` 方向应有效 线性渐变的方向应该遵循CSS3标准。非标准值可能...

    css中文手册 css样式表

    4. **层叠(Cascading)**:CSS中的“层叠”意味着当有多个样式应用于同一元素时,浏览器会根据权重决定应用哪个样式。权重由选择器的类型决定,ID选择器权重最高,类次之,标签最低,内联样式权重最高。 5. **继承...

    浅谈CSS伪类与伪元素

    在前端开发中,CSS是构建网页界面的核心技术之一,而伪类与伪元素是CSS中的重要概念,它们扩展了CSS选择器,提供了更多定义元素样式的方法。伪类和伪元素虽然在作用上有所重叠,但它们在设计理念、使用场景和具体...

    增添节日互动:使用 CSS `:hover` 伪类为圣诞树添加鼠标悬停效果

    CSS `:hover` 伪类是一种强大的工具,它可以让网页设计师为网页元素添加悬停效果,提升用户的交互体验。在圣诞树装饰的应用场景中,我们可以利用 `:hover` 伪类实现圣诞树及其它装饰物在鼠标悬停时的样式变化。这种...

    纯CSS3伪类实现icon标签效果特效代码

    `:before`伪类允许我们在元素内容之前插入一个或多个新的内容,这些内容是通过CSS生成的,而不是直接存在于HTML中。这通常结合`content`属性一起使用,如`content: "some text"` 或 `content: url(some-image.jpg)`...

Global site tag (gtag.js) - Google Analytics