CSS: Cum pot sa am 2 stiluri/fonturi diferite la hyperlinks ?
Last Updated: Feb 18 2022 22:04, Started by
me_suzy
, Feb 18 2022 21:18
·
0
#1
Posted 18 February 2022 - 21:25
Am acest css:
a, a:active, a:focus, a:hover { text-decoration: none !important; outline: none; color: #007bff; font-weight: bold; } a:focus, a:hover { color: red; font-weight: bold; } a, *::before, *::after, img, span, input, button, .navbar, .fixedmenu, .tp-bullet, .owl-dot, .owl-prev, .owl-next { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } Si am aceste 2 linkuri., page 1.html si page 2.html <div class="single-post mx-1"> <i class="fa fa-calendar mx-1"></i> <div class="text"> <a href="https://website.ro/page1.html" class="color-grey">Page 1</a> </div> </div> <div class="single-post mx-1"> <i class="fa fa-calendar mx-1"></i> <div class="text"> <a href="https://website.ro/page2.html" class="color-grey">Page 2</a> </div> </div> Problema este ca al meu css le selecteaza pe amandoua cu rosu, bold. Eu as vrea ca pentru cel de-al doilea link, adica page 2.html sa apara in culoarea albastra si la hover as vrea sa apara cu galben. Cum sa construiesc CSS-ul pentru ca al doilea link sa fie diferit? Pe langa un nou CSS, trebuie sa adaug ceva la <div> ? SOLUTIE 1 ----------------------------------------------------------- Una din posibilitati este sa faci o clasa noua: .color-link-nou { color: #007bff; font-weight: bold; } iar la linkul al doilea sa adaugi clasa: <a href="https://website.ro/page2.html" class="color-link-nou">Page 2</a> Edited by me_suzy, 18 February 2022 - 21:27. |
#2
Posted 18 February 2022 - 21:31
Poti face reguli cu nth-child: https://developer.mo.../CSS/:nth-child ... primul copil al unui element are o culoare, al doilea are alta, al treilea alta ...
|
#3
Posted 18 February 2022 - 21:39
O alta solutie e sa targetezi link-ul dupa calea din href. In cazul tau:
a[href="https://website.ro/page2.html"] { color: blue; } a[href="https://website.ro/page2.html"]:hover { color: yellow; } O alta solutie e sa folosesti cum s-a zis mai sus nth-child(), doar ca acest lucru trebuie aplicat asupra elementelor cu clasa single-post. .single-post:nth-child(2) a { color: blue; } .single-post:nth-child(2) a:hover { color: yellow; } O alta solutie e cea cu clasa custom pentru al doilea link. |
#4
Posted 18 February 2022 - 21:43
utopium, on 18 februarie 2022 - 21:31, said:
Poti face reguli cu nth-child: https://developer.mo.../CSS/:nth-child ... primul copil al unui element are o culoare, al doilea are alta, al treilea alta ... salut, multumesc pentru raspuns. Dar nu am inteles multe din linkul tau ajutator. Daca ai putea sa aplici metoda din linkul tau in exemplul meu de mai sus, asa cum au facut ceilalti cu metoda lor, m-ai ajutat atat pe mine cat si comunitatea sa inteleaga mai usor. Se intelege cel mai usor pe exemplul de caz. E nebunie felul cum este explicat acolo... |
#5
Posted 18 February 2022 - 22:04
Bogdan__26, on 18 februarie 2022 - 21:39, said:
O alta solutie e sa targetezi link-ul dupa calea din href. In cazul tau: a[href="https://website.ro/page2.html"] { color: blue; } a[href="https://website.ro/page2.html"]:hover { color: yellow; } O alta solutie e sa folosesti cum s-a zis mai sus nth-child(), doar ca acest lucru trebuie aplicat asupra elementelor cu clasa single-post. .single-post:nth-child(2) a { color: blue; } .single-post:nth-child(2) a:hover { color: yellow; } O alta solutie e cea cu clasa custom pentru al doilea link. Example la ce am zis mai sus: https://jsfiddle.net/xq5muvp1/ solutia cu nth-child https://jsfiddle.net/xq5muvp1/1/ solutia cu href |
Anunturi
Bun venit pe Forumul Softpedia!
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users