Question

我遇到的情况是我的CSS应用的样式不适用于被样式化的对象。以下是我的site.css文件中的完全代码...

.rules aside {  
    width: 270px;  
    right: 0px; 
    top: 0px; 
    float: left;
}

.rules aside h3 { 
    border-bottom-width: 2px; 
    border-bottom-style: solid; 
    border-bottom-color: #2A2A2A; 

    padding-bottom: 6px; 
    padding-top: 11px; 

    margin-bottom: 0px; 

    color: #F0E29A; 
    font-size: 14px; 
    letter-spacing: -0.5px; 
    text-transform: uppercase; 
}

现在这里有一些利用它的HTML ......

<article class="content rules">
   <section>
   // ...
   </section>
   <aside>
     Some Content
   </aside>
</article>

这是Chrome的Inspector为<aside>元素显示的CSS标记..

.rules aside {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #2A2A2A;
padding-bottom: 6px;
padding-top: 11px;
margin-bottom: 0px;
color: #F0E29A;
font-size: 14px;
letter-spacing: -0.5px;
text-transform: uppercase;
width: 270px;
right: 0px;
top: 0px;
float: left;
}

这没有任何意义。应该只从<h3>选择器设置.rules aside h3元素的样式。然而，它正在逐步落入根<aside>元素。我也有其他情况发生这种情况。这种情况发生在Google Chrome（最新版本）

中

包括用于证明的屏幕截图。 enter image description here

thirtydot编辑：

jsfiddle.net/2hnLx - 运行此功能完全相同的.html文件代码我的机器产生问题结果，但是从jsFiddle运行它预期的结果。 - 史黛西

来自jsFiddle的代码：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>jsFiddle Example</title> 
    <style type="text/css"> 
        article, section, aside, header, nav { display: block; }

        #container { 
            margin: 0px auto; 
            width: 960px; 
            position: relative;
        }
        section { 
            float: left;
            width: 685px; 
            left: 0px; 

            background-color: #ccc;
        }
        section h2 {
            padding: 10px;
        }
        section h3 { 
            font-size: 32px; 
            color: #ffcc00; 
            font-weight: bold; 
            padding: 10px; 
            border-bottom-width: 2px; 
            border-bottom-style: solid; 
            border-bottom-color: #2A2A2A; 
            margin-bottom: 18px; 
            margin-left: 10px;
            margin-right: 10px;
        }

        .rules aside {  
            width: 270px;  
            right: 0px; 
            top: 0px; 
            float: left;

            background-color: #000;
        }

        aside h3 { 
            border-bottom-width: 2px; 
            border-bottom-style: solid; 
            border-bottom-color: #2A2A2A; 

            padding-bottom: 6px; 
            padding-top: 11px; 

            margin-bottom: 0px; 

            color: #F0E29A; 
            font-size: 14px; 
            letter-spacing: -0.5px; 
            text-transform: uppercase; 

            background-color: #fff;
        }
    </style> 
</head> 
<body> 
    <div id="container"> 
        <article> 
            <section> 
                <p>Section Text</p> 
            </section> 
            <aside> 
                <p>Aside Text</p> 
            </aside> 
        </article> 
    </div> 
</body> 
</html>

Answer 1

我在Chrome 9中试过这个。我无法重现该错误。这里有我的代码（你可以试试）：http://dl.dropbox.com/u/20195191/StackOverflow/so_4945633.html

这是Chrome的屏幕截图。 screenshot of css properties

Answer 2

解决。
这是BOM。尝试将site.css文件保存为UTF-8而不使用BOM，它将起作用。

<强>更新
这是固有的：UTF-8 HTML and CSS files with BOM (and how to remove the BOM with Python)

CSS中的特殊反向级联

2 个答案: