• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS nie działają pseudoklasy

Object Storage Arubacloud
+2 głosów
140 wizyt
pytanie zadane 16 lutego w HTML i CSS przez Iei Obywatel (1,950 p.)

Witam, zaczynam tworzyć menu w html i css. Czy ktoś może wyjaśnić dlaczego w tym kodzie nie działają żadne pseudoklasy poza a:link?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
            <li><a href="#">Menu4</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>
body {
    background-color: lightblue;
}

nav li {
    display: inline;
    border: 1px solid green;
    padding: 5px;
    border-radius: 5px;
}

a:active {
    color: green;
}

a:hover {
    color: yellow;
}

a:visited {
    color: white;
}

a:link {
    color: red;
}

 

2 odpowiedzi

+3 głosów
odpowiedź 16 lutego przez Fiji404 Użytkownik (860 p.)
wybrane 17 lutego przez Iei
 
Najlepsza

Nie aplikują się dlatego, że każdy z Twoich selektorów ma taka samą specyficzność, a ostatnim jest a:link, który nadpisuje poprzednie style z :hover i :active kolorem czerowonym - kaskadowość. Tak naprawdę wystarczy zmienić kolejność tych selektorów
 

body {
    background-color: lightblue;
}
 
nav li {
    display: inline;
    border: 1px solid green;
    padding: 5px;
    border-radius: 5px;
}

a:link {
    color: red;
}

a:visited {
    color: white;
}

a:hover {
    color: yellow;
}
 
a:active {
    color: green;
}

 

+1 głos
odpowiedź 17 lutego przez VBService Ekspert (253,200 p.)

Możesz też pominąć a:link

nav a {
    color: red;
}
nav a:hover {
    color: yellow;
}
nav a:visited {
    color: white;
}
nav a:active {
    color: green;
}

ponieważ w Twoim przykładzie i tak a:visited zmieni wygląd odwiedzonych linków.

komentarz 19 lutego przez Iei Obywatel (1,950 p.)

Nie rozumiem tutaj tylko jaka jest różnica między a a a:link

1
komentarz 19 lutego przez VBService Ekspert (253,200 p.)
edycja 19 lutego przez VBService

BTW, zobacz w której kategorii pseudo-klas jest zakwalifikowany każdy z nich

np. najlepiej się sprawdza :link gdy chcesz tylko zaznaczyć na stronie niekliknięte linki

[ działający przykład on-line ]

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Styl dla wszystkich linków */
      a {
        color: black;
        text-decoration: none;
      }

      /* Styl dla linków, które nie zostały odwiedzone */
      a:link {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="https://picsum.photos/id/159/1100/662" target="_blank">Link 1</a> Fusce vestibulum, nulla eu dictum vulputate, arcu justo dapibus ligula, sit amet vehicula odio urna nec elit.
    </p>
    <p>
      <a href="https://picsum.photos/id/112/1100/662" target="_blank">Link 2</a> Ut dapibus ullamcorper facilisis. Vivamus aliquet congue justo, at iaculis sem bibendum ut.
    </p>
    <p>
      In hac habitasse platea dictumst. Integer congue mauris ac massa porta, a rhoncus orci iaculis.
      <a href="https://picsum.photos/id/365/1100/662" target="_blank">Link 3</a> Curabitur et consequat justo.
    </p>
  </body>
</html>

 

Podobne pytania

0 głosów
1 odpowiedź 230 wizyt
pytanie zadane 19 kwietnia 2016 w HTML i CSS przez BlvckFox Gaduła (4,240 p.)
+1 głos
1 odpowiedź 157 wizyt
pytanie zadane 9 stycznia 2016 w HTML i CSS przez Jutta Obywatel (1,190 p.)
0 głosów
1 odpowiedź 145 wizyt
pytanie zadane 19 października 2016 w HTML i CSS przez damian23415 Użytkownik (890 p.)

92,558 zapytań

141,407 odpowiedzi

319,569 komentarzy

61,945 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...