Selektor wieloznaczny CSS

Selektor wieloznaczny może być używany do wybierania wielu komponentów jednocześnie. Wybiera podobne typy nazw klas lub atrybutów i stosuje do nich właściwości CSS. Kiedy użyjemy tego wyboru wieloznacznego w CSS, wybierze wszystkie elementy o podobnej nazwie klasy. Istnieją trzy różne selektory wieloznacznych dostępnych w CSS i wszystkie z nich mają różne funkcje. Wszystkie trzy selektory wieloznacznych działają inaczej i wybierają elementy inaczej. Wyjaśniliśmy wszystkie trzy selektory wieloznacznych w tym samouczku, a także wykonamy przykłady, w których będziemy używać tych selektorów wieloznacznych.

Selektory wieloznaczne

• [atrybut*= „wartość”] to selektor wieloznaczny, który służy do znajdowania elementów, których wartość atrybutu zawiera ciąg, który podaliśmy tutaj jako wartość.
• [atrybut = ”wartość”] to selektor wieloznaczny, który służy do znajdowania elementów, których wartość atrybutu zaczyna się od ciągu, który podaliśmy tutaj jako wartość.
• [atrybut $ = ”wartość”] Selektor to selektor wieloznaczny, który służy do znajdowania elementów, których wartość atrybutu kończy się ciągiem, który podaliśmy tutaj jako wartość.

Przykład 1

Rozpoczynamy nasz kod i wykonujemy te kody w kodzie Visual Studio. Najpierw otwieramy nowy plik. Następnie wybieramy HTML jako język, a następnie umieszczamy „!”I naciśnij„ Enter ”. Wszystkie podstawowe tagi HTML pojawiają się tutaj. Więc nie musimy dodawać wszystkich tych tagów ręcznie. Właśnie umieściliśmy znacznik „linku” w „głowie”, w którym umieszczamy nazwę pliku CSS. Wewnątrz ciała wkładamy nagłówki i niektóre pojemniki Div oraz niektóre akapity. Wszystkie Divy i akapity zawierają różne nazwy klas, więc użyjemy tych nazw jako wartości w selektorie wieloznacznej do wyboru elementów w CSS. Następnie zastosujemy inny styl do wybranych elementów.

Umieszczamy składnię selektora wieloznacznego [klasę * = „str”], która wybierze wszystkie elementy, których nazwa klasy zawiera „str”. Przekazujemy „STR” jako wartość tego wyboru wieloznacznego. Zastosujemy niektóre właściwości, aby łatwo zauważyć, jak wybierze elementy i zastosuje styl do wszystkich. Ustawiamy „czarne” jako „tło” dla wszystkich elementów zawierających „str” w ich nazwach klas.

Ustawiamy tekst „kolor” na „biały”, ponieważ użyliśmy czarnego na tle. Zmieniamy również rozmiar tekstu, wykorzystując właściwość „wielkości czcionki” i ustawiając ją na „18px”. Dostosowujemy również tekst wybranych elementów do „środka” z wykorzystaniem właściwości „rodziny czcionki” i ustawiamy ją na czcionkę „Arial”. Waga czcionki wybranych elementów jest ustawiona na „BOLD”. W tym samouczku podajemy również dane wyjściowe kodów. Zobacz dane wyjściowe i sprawdź, w jaki sposób wybiera elementy i stosuje wszystkie te właściwości do wybranych elementów.

Wyjście pokazuje, że wybiera wszystkie elementy, których nazwy klas zawierają „Str”, a właściwości, które użyliśmy w kodzie CSS, są stosowane do wybranych elementów.

Przykład 2

Ponownie mamy wiele klas DIV i wiele akapitów o różnych nazwach klas i nagłówek na początku. Zastosujemy selektor wieloznaczny w CSS i wybierzemy elementy z tego pliku HTML i zmieni styl tych wybranych elementów.

W tym przykładzie używamy drugiej składni wieloznacznej karty, czyli [klasa $ = „str”]. Wybierze wszystkie elementy, których nazwy klas kończą się ciągiem „str”. Stosujemy również podane właściwości stylizacji, które używamy na wybranych elementach. Udekorujemy wybrany tekst przy użyciu właściwości „Dekaturek tekstu” i umieszczamy „Podkreśl” dla tej właściwości. Zmieniliśmy „kolor” tekstu na „bordowy”. Korzystamy również z właściwości „wielkości czcionki” i umieszczamy „22px” jako jej wartość do zmiany rozmiaru tekstu. Używamy również atrybutu „Font-Family”, aby ustawić czcionkę na „Times New Roman”, a „Waseight FONT” wybranego elementu został ustawiony na „Bold."

Tutaj możesz zobaczyć wszystkie te klasy, których nazwy kończą się ciągiem „str”, są wybierane i zmieniane. Wszystkie właściwości, które opisaliśmy w CSS, są tutaj stosowane na tych elementach, których nazwy klas kończą się w „str”. To wszystko z powodu wykorzystania selektora wieloznacznego.

Przykład 3

Ten plik HTML jest taki sam jak powyżej. Po prostu zmieniamy nazwy klas Div i akapitu. Do tego kodu użyjemy trzeciej składni selektora wieloznacznego w CSS.

W tym przykładzie użyjemy trzeciej składni wieloznacznej karty, która jest [class^= „str”] i wybierze wszystkie elementy, których nazwa klasy zaczyna się od ciągu „str”. Dla wszystkich elementów z „STR” na początku nazw klas ustawiamy „Pink” jako „tło”. Zmieniliśmy „kolor” tekstu na „czerwony”. Używamy właściwości „wielkości czcionki” i określamy ją na „22px”, aby zmienić rozmiar tekstu. Używamy również atrybutu „rodziny czcionki”, aby zdefiniować rodzaj czcionki do „kalibrii” i przenieść tekst wybranych elementów na „środkowy”. W stylu czcionki określonych elementów zostało tutaj ustawione na „kursywę”.

Na tym zrzucie ekranu wszystkie te elementy są stylizowane, których nazwa klasy zaczyna się od ciągu „str”. Selektor wieloznaczny wybiera wszystkie te elementy i stosuje do nich wszystkie właściwości. Możesz to również zobaczyć na wyjściu.

Przykład 4

Nieco zmienimy poprzedni kod HTML. Dodajemy więcej kontenerów DIV i dodajemy więcej akapitów w poprzednim pliku HTML i zastosujemy wszystkie trzy selektory wieloznacznych w kodzie CSS tego przykładu.

W tym kodzie najpierw stosujemy styl do nagłówka i zmieniamy „rodzinę czcionki” na „algierskie”. Ustawiamy również nagłówek w „centrum”, wykorzystując właściwość „Alignaj tekstu”. Właściwość „dekoracja tekstu” znajduje się tutaj, którą ustaliliśmy jako „podkreślenie”, więc narysuje podkreślenie nagłówka. „Kolor” dla tego jest ustawiony jako „bordowy”.

Następnie używamy selektora wieloznacznego, w którym umieściliśmy „*” i „str” jako wartość. Tak więc wybierze wszystkie klasy, które zawierają „STR” w ich nazwie klas. Używamy również niektórych właściwości, które będą miały zastosowanie do wybranych elementów. Po ustawieniu właściwości stylu tego selektora wieloznacznego, zmierzamy w kierunku następnego selektora wieloznacznego, który jest „[class^=„ par ”]” wybierze wszystkie elementy, w których nazwy klas zaczynają się od ciągu „par” i będzie miał zastosowanie Te podane właściwości na tych elementach.

Teraz używamy tutaj ostatniego selektora wieloznacznego, który piszemy jako „[klasa $ =„ div ”]”. Tak więc wybierze te elementy, których nazwa klasy kończy się w ciągu „div”, a także zastosuje na nich podane właściwości. Wszystkie te selektory wieloznaczne ignorują elementy, które nie spełniają stanu tych selektorów wieloznacznych.

Spójrz na to wyjście, te elementy zawierające „str” w nazwach klas są tak samo stylowe, te elementy, których nazwa klasy zaczyna się od „par”, są tak samo, a elementy, których nazwa klasy zawiera „div” na końcu Nazwa klasy jest taka sama. A te elementy, które nie zawierają „str” w nazwie klasy, a także ich nazwy klas nie zaczynają się od „par” i nie kończą się w ciągu „div”, nie są wybrane i wydają się tutaj proste. Żadna nieruchomość nie jest do nich stosowana.

Wniosek

Celem napisania tego samouczka jest poprowadzenie Cię o selektory CSS Wildcard. Zbadaliśmy selektory CSS Wildcard i wyjaśniliśmy ci, czym są selektory wieloznaczni, jak korzystać z tych selektorów wieloznacznych i jak działają. Omówiliśmy, że selektory wieloznaczne są używane do wybierania wielu elementów jednocześnie i używane do stosowania właściwości stylizacji do tych elementów, które wybraliśmy za pomocą tych selektorów z odbytu. Pokazaliśmy również przykłady, w których zastosowaliśmy te selektory wieloznaczne i dostarczyliśmy wyniki wszystkich przykładów w tym samouczku.