:: atlase - CSS-triki | CSS almanahs 2025

Izmantojot kursoru, atlasiet šo teikumu. Ievērojiet, kā, atlasot tekstu, fona krāsa aizpilda vietu? Stila veidā var mainīt atlasītā teksta fona krāsu un krāsu ::selection. Šī pseido elementa veidošana ir lieliska, lai lietotāja atlasīto tekstu pielāgotu jūsu vietņu krāsu shēmai.

p::-moz-selection ( color: red) p::selection ( color: red; )

Ņem vērā, ka šī pseido elementa sintaksē ir nepieciešama dubultā kola, neskatoties uz to, ka citi pseido elementi pieņem vienu kolu.

Kā redzams iepriekš, varat veidot ::selectionatsevišķus elementus. Jūs varat arī noformēt visu lapu, nometot tukšo pseido elementu savā stila lapā.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Ir tikai trīs īpašības, kas ::selectiondarbosies:

color
background( background-color, background-image)
text-shadow

Skatiet Kriss Koijers (@chriscoyier) atlasīto testu Pen :: atlases testus vietnē CodePen.

Ja mēģināt veidot stilu ::selectionar īpašumu, kas nav sarakstā, šis īpašums tiks ignorēts. Tas var būt sarežģīti redzēt backgroundšajā sarakstā, jo rekvizīts atveidos krāsu tikai tad, kad to izmantos, ::selectionun tas netiks padarīts fona attēls vai gradients.

Arī nemēģiniet šo:

p::-moz-selection, p::selection ( color: red; )

Kad pārlūkprogrammas atrod daļu no atlases, kuru viņi nesaprot, viņi pamet visu lietu, tāpēc tas visu laiku neizdosies.

Viens no visnoderīgākajiem izmantošanas veidiem ::selectionir izslēgšana text-shadowatlases laikā. A text-shadowvar sadurties ar atlases fona krāsu un apgrūtināt teksta lasīšanu. Iestatiet, text-shadow: none;lai atlases laikā teksts būtu skaidrs un viegli lasāms.

Skatiet Kriss Koijers (@chriscoyier) PenPlay atlases teksta ēnu vietnē CodePen.

Iedomātā :: atlase

Pārī ar Sass vai jebkuru citu priekšapstrādātāju jūs varat izveidot patiešām atdzistus efektus ::selection. Zemāk esošajā demonstrācijā atlasiet tekstu:

Jūs, iespējams, pamanīsit, ka dažās pārlūkprogrammās efekts nav tik gluds. Iesniegsim šo demonstrāciju sadaļā: lietas, kas ir iespējamas, bet, iespējams, tikai izklaides nolūkos.

Vēl viens mēms, bet jautrs mazs triks ir attēla atklāšana, izmantojot atlasīto tekstu.