CSS背景颜色问题

debugcn 发表于 Dev

用户名

<html>
    <head>
        <style type="text/css">
            #header-1           {background: red};
            h2#header-1         {background: maroon};
            body h2#header-1    {background: fuchsia};
            .headers            {background: green};
            h2.headers          {background: olive};
            body h2.headers     {background: lime};
            h2                  {background: blue};
            body h2             {background: aqua};
            #header-1           {background: blue};
        </style>
    </head>

    <body>
        <h2 style="background: orange">Inline rule style</h2>  <!-- orange  --> <!-- orange -->
        <h2 id="header-1">Identity Style</h2>  <!-- maroon  --> <!-- fuchsia -->
        <h2 class="headers">Class Style</h2>   <!-- green  --> <!-- green -->
        <h2>Element Style</h2>   <!-- blue --> <!-- blue  -->
    </body>
</html>

您好，我和一个朋友正在完成以前的一些纸质考试问题，并且遇到了与HTML样式元素的样式有关的问题。我们知道第一个元素的样式为橙色，因为内联的优先级高于CSS。

但是从那里我们很困惑，第二个h2似乎输出红色，第三个和第四个什么都不做。

任何对此的帮助或见解将是有帮助的。

这是一个jsfiddle：http : //jsfiddle.net/mLVF3/

科恩·彼得斯（Koen Peters）

您将放;错了位置：放在后面}而不是里面。使用此CSS：

#header-1           {background: red;}
h2#header-1         {background: maroon;}
body h2#header-1    {background: fuchsia;}
.headers            {background: green;}
h2.headers          {background: olive;}
body h2.headers     {background: lime;}
h2                  {background: blue;}
body h2             {background: aqua;}
#header-1           {background: blue;}

看到这个jsfiddle：http : //jsfiddle.net/mLVF3/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。