外联CSS样式表在谷歌或火狐浏览器不起作用；CSS规则单独运行起作用，放到一起运行则不起作用解决方法

刚开始学CSS样式，遇到了两个问题。两个问题都折腾了我一天的时间。终于解决了。特写此文分享经验。当然每个经验都是针对特定问题的，可能我的经验并不能解决你遇到的问题。有说错的还请高手多多指教。

问题一：

现象：外联CSS样式表在一些浏览器能起作用，在一些浏览器（例如谷歌、火狐浏览器）则没有出现预期的效果。

解决办法：这种问题现象说明是外联CSS样式表的书写不符合规范。谷歌或火狐等浏览器的检查比较严格，所以才没有效果。这时候就要检查自己的代码是否有哪里是不规范的。
还有另一种可能就是html文件的编码和外联CSS样式表文件的编码不同。比如一个是UTF-8，一个是ANSI编码的。想确定是不是编码问题很简单。只要把外联CSS样式表的内容直接转换成写在html文件中的内容（即内联CSS样式表），如果这时样式起作用了。那应该就是编码问题了。此时把其中一者的编码转换成另一种的就好了。

问题二：

我一开始的CSS样式表代码是这样的：

pre{  margin-bottom: 0px !important; word-spacing: 0px; -ms-word-wrap: normal; 
box-sizing: border-box; widows: 1; font-size-adjust: none; font-stretch: normal; 
background-color: #f7f7f7; -webkit-text-stroke-width: 0px;" data-source-line="2";}

.pclass code{
 BORDER-LEFT: rgb(221,221,221) 1px solid;
   BACKGROUND: rgb(250,250,250); WHITE-SPACE: nowrap; PADDING-BOTTOM: 0px;
    PADDING-TOP: 0px; PADDING-LEFT: 4px;PADDING-RIGHT: 4px; border-radius: 3px;
}

为了说明问题，我先补充一点，上面的CSS代码包含两个CSS规则，分别是pre和.pclass code规则。
问题现象：只单独使用pre规则或.pclass code则起作用，但是像两个规则上面那样两个规则一起使用则.pclass code不起作用。弄了半天我试着把pre规则放在.pclass code规则的后面，发现两个都起作用了！
解决方法：出现这种问题是因为pre规则的书写有错，虽然出错的地方不影响其本身，但是却导致后面的.pclass code规则无法被解析。仔细观察上面的代码，发现是-webkit-text-stroke-width: 0px;后面多了个双引号。去掉即可。