01. februar 2006 - 18:15Der er
8 kommentarer og 2 løsninger
Text-decoration på nested elementer
Jeg vil gerne have alle liste-elementer i en liste, hvor teksten ikke er et link til at være gennemstreget. Jeg troede det var simpelt. Jeg har et eksempel på det der ikke virker til sidst i mit spm.
Jeg vil gerne vide hvordan jeg får det til at virke, samt hvordan du/I løste problemet...
Mvh. Jakob J.
Eksempel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Language" content="da"> <title>css test</title> <style> li {text-decoration:line-through;} li a {text-decoration:none;} </style> </head> <body> <ul> <li><a href="#">No decoration</a> <ul> <li><a href="#">No decoration</a></li> <li>Line-through decoration</li> </ul> </li> </ul> </body> </html>
Mmmja.. Men jeg ville gerne have unden IDs og Classes... Samt vide hvorfor li {text-decoration:line-through;} og li a {text-decoration:none;} ikke virker...
Jamen, det gør det sandelig også ... du lægger bare ikke mærke til det ;o) Det er ikke mindst property'en 'text-decoration', der driller - da den på visse måder adskiller sig fra andre properties. Den letteste måde at se det på er, hvis du prøver en anden værdi end 'none':
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Language" content="da"> <title>css test</title> <style> li {text-decoration:line-through;} li a {text-decoration:underline;} </style> </head> <body> <ul> <li><a href="#">No decoration</a> <ul> <li><a href="#">No decoration</a></li> <li>Line-through decoration</li> </ul> </li> </ul> <p><a href="#">hjhkjhkjh</a></p> </body> </html>
Her kan du se, hvad det er, der sker. Alt indhold i li-elementet er gennemstreget - mens alt i a-elementet er understreget. I dit oprindelige eksempel, er alt i li-elementet gennemstreget - mens der ikke er nogen tekstdekoration på indholdet i a-elementet.
Selectoren her: li a { // regler }
- overskriver ikke: li { // regler }
... den udvider den! Det er noget helt andet, selvom resultatet ofte ser ud somom, den første selector overskriver den anden ... f.eks. hvis du havde angivet en tekstfarve i stedet for en tekstdekoration.
'li a' selectoren gør jo ikke noget ved nogen li-elementer - men ved a-elementer under et li-element.
Hvis du nu sætter to forskellige farver i stedet. Så er alt i li-elementet f.eks. farvet gult. Alt i a-elementet er farvet rødt - men da de to effekter 'ligger oveni hinanden' kan det ikke ses at teksten egentlig både er gul og rød på én gang :)
Det kan til gengæld ses med gennemstregning og understregning, fordi effekterne ligger forskudt og kun består af en streg.
Et andet - og måske bedre - eksempel er, hvis li-elementerne er relativt positioneret. Så vil det ikke røre et li-element med et a-element som barn, hvis 'li a' selectoren refererer til en regel, der siger 'position:absolute'. Li-elementet vil stadig være positioneret relativt :)
"'li a' selectoren gør jo ikke noget ved nogen li-elementer - men ved a-elementer under et li-element." - Det var jo derfor!.. Det tog sin tid, men den siv ind.. :)
Jeg ser ser gerne et par svar, I har jo begge fået fat i det rigtige...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.