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>
Støv, fibre og metalliske partikler kan påvirke både uptime, levetid og driftssikkerhed. Derfor arbejder flere datacentre systematisk med contamination control.
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.