Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

li eller li a:link

1
Skriv svar
Permalänk
Avstängd
●

li eller li a:link

Hej,
Kanske är det för att jag aldrig har läst en CSS-bok från början till slut, men jag fattar faktiskt inte det nedanstående. Om nån kunde förklara för mig, så vore jag tacksam.

Satt och påtade med en enkel Wordpress sida och ville ändra på menyns font samt storlek. Jag rotade mig igenom css:et och bestämde mig för följande (tillagt sist i CSS-kaskaden så att inget skulle komma och återställa längre ner):

.main-nav .menu li {
font-family: 'Oswald', sans-serif;
font-size: 125%;
}

Ovanstående kod ändrade dock bara fonten, men inte textstorleken. För att även ändra textstorleken vara jag tvungen att göra:

.main-nav .menu li {
font-family: 'Oswald', sans-serif;
}

.main-nav .menu li a:link { 
font-size: 125%;
}

Varför måste jag specificera a:link för textstorleken när det räcker med li för att byta ut fonten?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Gissningsvis är detta ett css-specificitets problem.
http://www.smashingmagazine.com/2007/07/27/css-specificity-th...

Det skulle kunna vara så att du har en annan regel högre upp dom säger

.class .class li a {
font-size: 100%;
}

Då den är mer "specifik" än ".main-nav .menu li" så kommer den användas istället. För att testa om det är så kan du lägga till "!important" såhär:

.main-nav .menu li {
font-family: 'Oswald', sans-serif;
font-size: 125% !important;
}

och se om det funkar, isf brukar det vara ovanstående problem. Användning av important ska man dock vara lite försiktig med. Om alla är important är ingen important.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

därför länken <a> ligger innanför li.

Länkarna har nog en bestämd storlek, så dom tar inte efter li's egenskaper.

<li><a></a></li>

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Lurigt värre. Det låg en "a font-size=13px" inbakad längre upp en bit bort från "a font-size=100%". Så i första exemplet hade jag lyckades 'override' 100% men inte 13px. Så indeed, det låg en mer specifik regel längre upp och strulade till det.
Tack för hjälpen!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Framtida tips: du vet kanske att du kan högerklicka på ett element på webbsidan och välja "Inspect element" eller motsvarande, åtminstone i Firefox och Chrome. Under "Styles" eller "Stil" till höger kan du se vilka CSS-regler den följer. Blir någon regel "overrided" så är den överstreckad, och du kan se längre upp vilken det är som faktiskt gäller. Det är också möjligt att lägga till regler där för att testa i realtid vad som händer då man gör vissa ändringar (notera dock att dessa bara är tillfälliga, och försvinner då sidan laddas om, de sparas alltså inte i din CSS-fil).

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Tack för tipset!
Jo, jag använder inspect element flitigt (och även WebDeveloper-tillägget fast det nu nästan har blivit för stort och krångligt att navigera i (jämfört med för några år sen i alla fall)).
Men det kluriga i det här fallet var dock att min font-size på 125% inte var överstreckad och den ursprungliga font-sizen på 100% var överstreckad, så jag fattade liksom inte varför det inte funkade. Det föll mig inte in att leta efter font-size definierad i pixlar också, när min override ändå var aktiv.

Redigera
Citera flera Citera
1
Skriv svar