Neurochirurgie minim invazivă
"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv. Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice. www.neurohope.ro |
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
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users