1. Generelt set skal du bruge class, hvis der er tale om en klasse af elementer, altså normalt flere, som skal have de samme egenskaber ...
-- deraf følger, at du, når du skal angive egenskaber for et element, som er unikt, bør bruge id til at angive egenskaberne !-)
Du kan iøvrigt også angive flere classes på samme element:
<p class="ny gul">
-- den går ikke med id, som _skal_ være unikt i _hele_ dokumentet !o]
2. Intet !-)
3. Block-level-elementer overtager ikke alle egenskaber fra omkransende elementer, som det ellers er standard i css, der er ikke andet at gøre end at nærlæse
http://www.w3.org/TR/REC-CSS2/selector.html og
http://www.w3.org/TR/REC-CSS2/propidx.html -- eller eventuelt hele
http://www.w3.org/TR/REC-CSS2/-- men du kunne jo sætte alle egenskaber som classes:
<style>
.red{color:red}
.ny {background-color=yellow}
.min {word-spacing: 3px;}
</style>
<body class="red">
<p class="ny min red">Test</p>
4. Kig i det første link, men kort:
: betyder, at det er en pseudo-selector, altså at det er en tilstand for elementet, at det er en speciel del af elementet eller lignende !-)
[] henviser til en property defineret i elementet (og den kan bruges som til stede -- den du viser -- eller som havende en bestemt værdi !-) men understøttelsen er ikke så voldsom i browserne ...
> betyder umiddelbar efterkommer, dvs. at elementet skal være direkte barn af det foranstående element, så umiddelbart er dit eksempel noget vrøvl, men der har sikkert stået tr>td, hvilket dog også skulle være overflødigt !-)
+ henviser til et element, som har et andet umiddelbart foran, altså i dit eksempel et f-element, som har et e-element lige foran ...
, betyder bare opremsning af elementer egenskabslisten gælder for, og
* betyder et hvilkensomhelst element her med mellemrum foran, hvilket betyder, at det skal være efterkommer af det foregående (i et vilkårligt antal generationer !-), altså betyder den sidste, at alle font-elementer og alle elementer, som på nogen måde er omkranset af font-elementer skal have de angivne egenskaber !-)