the css priority error

[flashlib]

Description:

In one webpage, I find a css style's priority is different with the chrome browser.

TEST CASE:

• Open http://theiphoneappslist.com/
• There are many links with the name of "Readmore" who have a blue background image.
• Open firebug, in the HTML locate one of the Readmore span.
• In the right style section, you will see the following styles:

style.css

a.readmore span {
  background-image:url(http://theiphoneappslist.com/wp-content/themes/PersonalPress/images/readmore.png);
  background-position:initial initial;
  background-repeat:no-repeat no-repeat;
  display:block;
  height:34px;
  padding:0 0 0 14px;
}

style-Teal.css

a.readmore span, .reply-container a {
  background-attachment:scroll;
  background-color:transparent;
  background-image:url(http://theiphoneappslist.com/wp-content/themes/PersonalPress/images/teal/readmore.png);
  background-position:0 0;
  background-repeat:no-repeat no-repeat;
}

In fact the first image is brown not blue. The second one which is belong to style-Teal.css is stroke-throunged. But this file is loaded after style.css and used by the browser.

Environment:

Firebug version (number):1.4.0.11967
Browser version:33.0.1750.117
Operating system:OSX 10.8.5