w3c系列CSS之路（二）：错误解析和基本数据类型-优快云博客

本文链接：https://blog.youkuaiyun.com/liquanfeng326/article/details/38826705

本文探讨了CSS中语法错误的处理方式，包括未知属性、非法值、畸形声明等，并介绍了基本数据类型如长度值、百分比、URL等的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候当你发现你写的样式代码并没有如期执行时，很可能是你打错字了。但是其他元素的样式并没有失效，这跟其他语言还是有区别的，比如C，语法出错编译就会报错，更别说执行了。CSS对于语法错误有它自己的解析机制，下面我们就来探讨一下。

1.错误处理

要想解析语法错误，首先得明白语法，一些基本的用法这里就不说了，说些关键点：

1.注意关键字的使用。不要在关键字外加引号。比如：color:"red";是不对的。

2.支持厂商对关键字的扩展。比如_height在非IE浏览器下是非法无效的，但在IE6下却是有效的。利用这个特性衍生出了 css hack。

3.对于html，CSS是大小写不敏感的。但是对于XML却相反。

4.@规则：@+标识符（比如@import）。CSS 2.1 user agents must ignore any '@import' rule that occurs inside a block or after any non-ignored statement other than an @charset or an @import rule.

举个例子：

@import "subs.css";
h1 { color: blue }
@import "list.css";

CSS会忽略第二个@import。上面这段代码等效于：

@import "subs.css";
h1 { color: blue }

有种情况例外，就是在import后面加了media type类型指定样式媒体目标。比如：

@import "subs.css";
@import "print-main.css" print;/*此段有效*/
@media print {
  body { font-size: 10pt }
}
h1 {color: blue }

css对于错误的处理态度就是无视之，下面看看都有哪些情况。

1.1未知属性和非法值

忽略未知属性和非法值，如果你写了mheight:100px;;这样的代码，CSS会直接忽略它,因为mheight是未知属性。同样，height:100kg;也会被无视，因为100kg是非法值。

但是，之前说了CSS支持厂商对关键字的扩展，所以某些属性对一般浏览器是未知的，但对于特定浏览器却是正确的，比如IE6的*height。

1.2畸形的声明

浏览器解析声明时会检测其()、{}、“”[]等匹配规则，遇到错误浏览器必须进行处理，但是怎么处理标准并没有说。比如p{color}会被无视。

1.3@+不可用的标识符

@import没错，@important就不对了。

1.4样式表的意外结尾

标准规定浏览器必须关闭需要成对出现的结构。比如：

@media screen {
    p:before { content: 'Hello

需要被解析成：

 @media screen {
    p:before { content: 'Hello'; }
  }

但是，很多浏览器并没有按标准来修复它。

1.5意外的字符串结尾

如果字符串结尾没有引号关闭它，浏览器必须要关闭它并忽略此段非法声明。

 p {
        color: green;
        font-family: 'Courier New Times
        color: red;
        color: green;
      }

需要被解析成：

 p { color: green; color: green; }

但是，很多浏览器并未按标准来修复它。

说了这么多，其实我只想说一句：非法的都忽略！所以不用担心写错一个字而让浏览器崩溃。至于标准所说的错误解析规则很多浏览器并没有实现这一点，我觉得也不重要，因为你就不应该犯这种低级错误！

2.基本数据类型

这节跟上节基本没啥关系啊，标准放在了同一章，这里就一起讲吧....

2.1整数和实数

就是数值嘛~，整数，小数，负数都支持啦~

2.2长度值

长度值的格式：数值+单位。如果数值为0，单位可有可无。

单位又分为相对单位和绝对单位，相对单位有：

em：em长度等效于作用在该节点"font-size"上的值。比如：

div{
    font-size:10px;
    height:2em;/*这里等价于20px*/
}

ex:ex长度相对于一个小写字母x的高度。通常被用在内容不包含"x"的元素上，这.....，不知道为什么会有这么奇葩的相对单位，反正没怎么见过。

绝对单位比较多：

in：英寸，等效于2.54cm；

cm：厘米，等效于10mm；

mm：毫米；

pt：点，等效于1/72 in；

pc：皮卡，等效于1/6 in；

px：像素，等效于0.75pt；

绝对单位都可以相对转换，用起来也比较简单，由于开发都是基于screen的，所以只用到了px.

2.3百分值

数值+%，怎么用大家都知道的。

2.4 URL和URI

URL统一资源定位符和URI统一资源标识符，这也算是基本单位.....二者的关系就不多说了。

2.5 Counters

这个属性之前没用过也没见过，脑补一下：

counters计数器可以对标签自动排序，通过counter-reset属性和counter-increment属性结合来实现。

counter-reset 属性
用法：counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
说明：利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
注释：如果使用display: none，则无法重置计数器。如果使用visibility: hidden，则可以重置计数器。

counter-increment 属性
用法：counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
说明：利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。
注释：如果使用了display: none，则无法增加计数。如使用visibility: hidden，则可增加计数。

我们来看个例子加深理解：

	<body>
		<h1></h1>
		<h2></h2>
		<h2></h2>
		<h1></h1>
		<h2></h2>
	</body>

body {
	counter-reset:num_h1;
	background:#aaa;
}
h1 {
	counter-reset:num_h2;
	background:#f0f;
}
h1:before {
	content:"类别 " counter(num_h1) ;
	counter-increment:num_h1;
}
h2:before {
	counter-increment:num_h2;
	content:counter(num_h1) "." counter(num_h2) ;
}

结果如下：

2.6 颜色值

颜色值的表示方法有以下几种：

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) }

CSS内置了一些颜色关键字，平时测试的时候可以用，做产品实际用的很少。