Czy istnieje selektor CSS dla elementów zawierających określony tekst?

Selektory CSS wybierają elementy HTML do zastosowania właściwości stylizacji. Są one wykorzystywane do znalezienia elementów, które chcesz stylizować. Istnieją pewne kategorie selektorów CSS, takie jak pseudoklasa, proste selektory i inne. Mówiąc dokładniej, selektor atrybutów jest najlepszą opcją do wyboru elementu o określonym tekście. W tym celu można również zastosować selektor kombinatory.

W tym artykule pokazano następujące metody:

• Metoda 1: Wybór elementu zawierającego określony tekst za pomocą selektora atrybutów CSS
• Metoda 2: Wybór elementu zawierającego określony tekst za pomocą ogólnego selektora rodzeństwa CSS

Metoda 1: Wybór elementu zawierającego określony tekst za pomocą selektora atrybutów CSS

Selektor atrybutów CSS „CSS [atrybut ~ = „wartość”]”Może pomóc wybrać element z określonym tekstem.

Składnia

Zrozumiemy składnię selektora atrybutów CSS:

[wartość atrybutu-name ~ =]

// deklaracje CSS

Tutaj:

• "nazwa atrybutu”: Podano atrybut użyty w elemencie HTML o pewnym tekście.
• "~”: Ten symbol jest kombinatorem rodzeństwa ogólnego. Jest wykorzystywany do wyboru każdego elementu, który jest następnym rodzeństwem danego elementu.
• "wartość”: Wskazuje wartość atrybutu.

Przykład

W pliku HTML postępuj zgodnie z wymienionymi instrukcjami:

• Najpierw dodaj „”Element i przypisz klasę„Pozycje-DIV".
• Dodaj "

  ”,„

  ", I "

  „Elementy w Div.

• „„

  " I "

  ”Dostosuj nagłówki na stronie. „„

  „Kierowanie się jest nieco mniejsze niż„

  " element.

• „„

  „Element określa zawartość tekstu na stronie:

Linuxhint

Rzeczy stacjonarne

książka

ołówek

Notatnik

książka

Stylujmy Div ”Pozycje-DIV”I nagłówek„

„Stosując właściwości CSS, jak wspomniano poniżej. Następnie zobaczymy, jak wybrać „

”Tekst elementu za pomocą selektorów atrybutów CSS.

Stylowa klasa „przedmiotów”

Następujące właściwości CSS są stosowane do „Pozycje-DIV" klasa:

.Przedmioty-
Text-Align: Center;
Rozmiar czcionki: 17px;
FONT-FAMILY: „TREBUCHET MS”;

Tutaj:

• "tekst-align”Określa wyrównanie tekstu.
• "rozmiar czcionki”Dostosowuje rozmiar czcionki elementu.
• "rodzina czcionek”Wybiera styl czcionki elementu.

Element stylu „H2”

"H2”Jest również znany jako selektor elementu. Służy do stylizacji „

”Element z następującymi właściwościami:

H2
Rozmiar czcionki: 30px;
Spacer z literami: 0.2em;
Kolor: RGB (182, 14, 238);

W powyższym bloku:

• "odstępy między literami”Dostosowuje odstępy między znakami elementu.
• "kolor”Przypisuje kolor do tekstu.
• "rozmiar czcionki„Własność jest zdefiniowana w powyższej sekcji.

Wybierz tekst „książka”

Aby wybrać konkretny tekst z dokumentu, nie ma określonego selektora. Atrybut elementu musi być określony. Następnie, z pomocą wartości atrybutu, możemy wybrać tekst w CSS:

[stacjonarne ~ = „książka”]
kolor tła: Cornflowerblue;

Tutaj, w CSS, „kolor tła„Właściwość jest dostosowywana do tekstu, określając atrybut„stacjonarny„Posiadanie wartości”książka".

Poniższe dane wyjściowe pokazuje, że wszystkie elementy o wartości atrybutu „książka”Są stylowe:

Teraz sprawdźmy przykład, aby zastosować style do „ołówek”Tekst. W tym celu atrybut stacjonarny z wartością „ołówek”Jest pobierany w CSS za pośrednictwem selektora atrybutów:

[stacjonarny ~ = ołówek]
kolor tła: RGB (240, 168, 234);
Wyściółka: 5px;

Tutaj:

• "kolor tła”Określił kolor tła elementu.
• "wyściółka”Przypisuje przestrzeń wokół treści elementu.

Wyjście

Metoda 2: Wybór elementu zawierającego określony tekst za pomocą ogólnego selektora rodzeństwa CSS

Istnieje inna metoda stosowania stylów na elementy mające tekst. Ale tę metodę należy wykorzystać, gdy masz wiele „

„Elementy mające trochę tekstu i musisz je wszystkie od razu stylizować. Aby to zrobić, określ element tuż przed „

„Elementy, a następnie dodaj ogólny symbol kombinatora rodzeństwa (~) i wspomnij o elemencie z tekstem do zastosowania stylów.

Składnia

Tutaj jest składnia wyżej wymienionego scenariusza:

Element pierwszej sekwencji ~ element drugiej sekwencji
Deklaracje CSS

Przykład

Dodajmy styl do wszystkich „ H4 ~ p
Kolor: Crimson;
Font-Weight: Bold;

„„H4 ~ p”Oznacza„

„Elementy, które są bezpośrednim rodzeństwem„

" element. Do niego dodano opisane następujące właściwości:

• „„grubość czcionki„Nieruchomość określa grubość czcionki elementu.
• „„kolor„Właściwość naprawia kolor czcionki.

Wyjście

Korzystając z tych sposobów, możesz wybrać elementy posiadające określony tekst do stylizowania w CSS.

Wniosek

Aby wybrać elementy zawierające określony tekst, CSS ”Selektory atrybutów" I "Ogólny selektor kombinatora rodzeństwa" może być użyte. Selektory atrybutów określają nazwę atrybutu elementu i jego wartość. Następnie zadeklaruj dla tego właściwości CSS. Ogólny selektor kombinatora rodzeństwa wybiera każdy element, po którym następuje poprzedni selektor. W tym artykule pokazano sposoby wyboru elementów w CSS o pewnym tekście.