Question

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

Answer 1

您应该这样做，即css在;

规则结束后，}不应以;结尾

css中的分号充当多个规则之间的分隔符，而不是行终止符。 [由于每个选择器下只有一个css规则，您甚至可以跳过<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>，但如果在选择器下编写多个样式规则，则必须这样做。]

{{1}}

Answer 2

您已将;放在错误的位置：}后面而不是内侧。使用这个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/

Answer 3

使用正确的语法，不应该关闭;之后}改为使用这种风格：

#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;}

CSS背景颜色问题

3 个答案: