2013-12-22 229 views
-1
<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。CSS背景颜色问题

但是从那里我们感到困惑,第二个h2似乎输出红色,第三和第四个不做任何事情。

任何帮助或对此的见解都会有所帮助。

这里有一个的jsfiddle:http://jsfiddle.net/mLVF3/

+0

你的意思是背景颜色? – Justin

+1

@Rao绝对有正确的想法。 – BuddhistBeast

+1

错误地放置了分号:'background:red;}'NOT'background:red};' –

回答

1

你已经把;在错误的地方:在}后面而不是里面。使用这个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/

3

你应该这样做,即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

使用正确的语法,它不应该被关闭用; after}使用这种风格代替:

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