[javascript/html/css/DOM] Dynamiskt skapade element har fel CSS

Säg att jag har en lista:

<ul id="lista">
  <li>första</li>
  <li>andra</li>
</ul>

och lägger till en <li> med hjälp av javascript:

function addListItem(){
  var ul = document.getElementById("comments");
  var li = document.createElement("li");

  var text = document.createTextNode("tredje");
  li.appendChild(text);
  ul.appendChild(li);
}

Då dyker list-elementet upp som det ska, men css-stylingen är inte samma som i de båda första li-elementen. Hur kommer det sig? Se bifogad bild. Bakgrunden på det sista elementet är mörkare, men det gör inte så mycket. Det ändrar jag med li.style.element. Värre är det med texten som skiljer sig ganska lite, men ändå väldigt synligt. Jag har ändrat färgen på texten från svart till någurlunda korrekt grå. Varför blir det såhär när listan finns definierad i css-filen? Jag kör Chrome under Mac, men det är samma beteende i Firefox.

Bifogad bild.

Oj då, ja det skulle vara id comments. Hur som helst så var det som du sa, hade ett script som lade till opacity: 0.5 på alla element. Javascript consolen är fantastiskt användbar.