Mindig hatalmas öröm, ha valami, amit korábban ötvenszer ugyanúgy oldottál meg, egyszerre elkezd nem működni és fogalmad sincsen, miért, hiszen minden ugyanolyan, semmi sincsen elgépelve, felcserélve, elfelejtve. Most egy ilyen problémát osztanék meg a tisztelt egybegyűltekkel, amire találtam workaroundot, de magyarázatot nem.

Adott tehát egy stíluslap, amelyben ilyen szabályok szerepelnek:

* { border: 0; }
...
form input, form textarea { border: 1px #ddd solid; background: #eee; }

Kérdés: Lesz-e kerete az űrlap mezőinek?
a, Lesz, mert az űrlapmezőkre vonatkozó szabály felülbírálja az univerzális szabályt.
b, Nem lesz, mert az univerzális szabály felülbírálja az űrlapmezőkre vonatkozó szabályt.
c, Nem lesz, mert bár az űrlapmezőkre vonatkozó szabály felülbírálja az univerzális szabályt, ez a tény a böngészőket nem érdekli.

A helyes válasz a c. Komolyan. Meg lehet nézni Firebuggal vagy Element Inspectorral, hogy az űrlap mezőin ott van az alkalmazott stílustulajdonságok között az egy képpont széles keret, mégsem úgy jelenik meg az oldalon, hanem keret nélkül. Viszont a háttér színe helyes.

Az ilyesmit azért általában kibírja az ember nevetőgörcs nélkül. Ilyenkor jön az, hogy elkezdjük kutatni a jelenség forrását, majd eljutunk oda, hogy szétdaraboljuk a szelektorokat egyszerűbbekre:

form input { border: 1px #ddd solid; }

form textarea { border: 1px #ddd solid; }

És meglepve tapasztaljuk, hogy így meg jó. És ez csak a border tulajdonsággal van így, minden más jó az első megadási móddal. Rohadjak meg, ha értem.