CSS Tilde

W CSS Tylde jest symbolem linii WASE, który jest reprezentowany jako „~”. Nazywa się to również „kolejnym kombinatorem rodzeństwa”. Używamy tego tylde lub kolejnego kombinatora rodzeństwa do oddzielenia dwóch selektorów złożonych. Innymi słowy, możemy powiedzieć, że selektor Tilde wybiera rodzeństwo wszystkich elementów określonego elementu. W tym samouczku omówimy działanie selektora Tilde. Użyjemy tego selektora Tilde w naszych kodach i pokażemy ci, jak to działa.

Przykład 1:

Aby użyć tego selektora Tilde w CSS, musimy najpierw utworzyć plik HTML i połączyć ten plik z naszym plikiem CSS, w którym użyjemy selektora Tilde. W tym przykładzie tworzymy jeden div i w tym Div mamy nagłówek i dwa akapity i znacznik „HR” między tymi dwoma akapitami. Ten znacznik „HR” jest używany do reprezentowania przerwy tematycznej między akapitami. Teraz, po zakończeniu tego kodu HTML, przejdziemy do pliku CSS, w którym korzystamy z tego selektora Tilde.

Poniżej znajduje się nasz kod CSS, w którym ukierunkowamy nagłówek, zmieniając jego „kolor” na „zielony” i wyrównujemy go w „centrum”, wykorzystując właściwość „Alignaj tekstu”. Zmieniliśmy także „rodzinę czcionki” i ustawiliśmy ją na „Algierskie”. Po stylizacji nagłówka używamy selektora Tilde. Pierwszym elementem jest „HR”, a drugi to „P”. Używamy tego selektora Tilde do wyboru wszystkich akapitów poprzedzonych „HR”, a następnie zastosowania niektórych właściwości stylizacji do tych akapitów. Wyrównujemy tekst do „uzasadnienia” i ustawiamy kolor tła za pomocą właściwości „koloru tła” i używamy do tego „pudrowego niebieskiego”. Właściwość „wielkości czcionki” jest również wykorzystywana i daje wartość „120%” tej właściwości. Następnie „Algierski” jest wybierany jako „rodzina czcionki”. Wszystkie te właściwości będą miały zastosowanie do akapitów poprzedzonych „HR”.

Spójrz na dane wyjściowe poniżej, wszystkie właściwości, których użyliśmy powyżej w pliku CSS, są stosowane tylko do akapitu poprzedzonego „HR”. Powyższy akapit pozostaje niezmieniony, ale drugi akapit po zmianie „HR” i wszystkie stylowanie jest stosowane do tego akapitu. To tylko z powodu selektora Tilde.

Przykład nr 2:

Tutaj umieściliśmy jeden div. W tej div umieściliśmy dwa akapity i jeden nagłówek. Następnie umieszczamy kolejny div w tej pierwszej div i umieścimy akapit i zamknęliśmy ten drugi div. Poza drugą divem, umieszczamy kolejny akapit i kierujemy. Następnie zamknięcie pierwszego Div tutaj. Po zamknięciu pierwszego div, ponownie umieść dwa akapity. A następnie zamknij znacznik ciała.

Tutaj umieszczamy selektor Tilde i umieszczamy „P” jako pierwszy element, a także „P” jako drugi element, a następnie pisze go jako „P ~ P”. Oznacza to, że pierwsze „P” poprzedza drugi „P”. Wybierze wszystkie „P”, po którym następuje pierwszy „P”. Wszystkie drugie „P”, po którym następuje pierwszy „P”, są odpowiednio stylizowane. Używamy właściwości „kolor”, która ustawia kolor czcionki akapitu i ustawia się na „czarny”. Rozmiar czcionki, którą tutaj ustawiamy, to „20px”. Wykorzystujemy słowo kluczowe „odważne” jako wartość „Was-W-W-W-W-W-Weight”. I wybór „Calibri” „Font-Family” w tym celu. „Kolor tła” pojawi się w „Light Coral”, ponieważ wybieramy ten kolor tutaj jako „kolor tła”.

Na poniższym wyjściu można zauważyć, że wszystkie drugie akapity, po których następuje pierwszy akapit, są stylizowane, ponieważ użyliśmy do tego selektora Tilde. Korzystając z selektora Tilde, wybieramy wszystkie drugie akapity poprzedzające pierwszy akapit.

Przykład nr 3:

W tym kodzie mamy DIV, a następnie nieuporządkowaną listę poza Div. Po zamknięciu tej listy piszemy akapit za pomocą tagów „P”, a następnie tworzymy drugą listę poniżej niniejszego akapitu. Kiedy ta druga lista się kończy, piszemy jeden nagłówek za pomocą tagów „H2”. Po tym nagłówku mamy inną listę. Wszystkie listy są tutaj nieuporządkowanymi listami.

Używamy „P”, a następnie selektora Tilde. Po selektorze Tilde mamy „UL”, co oznacza, że ​​wybiera wszystkie „UL” poprzedzone „P”. Używamy niektórych właściwości stylizacji, aby nadać styl „UL”, aby wyjaśnić Ci, jak ta Tylde wybiera elementy i zastosować podaną styl do wybranych elementów. Najpierw używamy właściwości „kolor” i ustawiamy „zielony” dla koloru tekstu. Tak więc wybrane elementy będą renderować w „zielonym” kolorze. Zwiększamy również „rozmiar czcionki” do „22px” i ustawiamy „rodzinę czcionki” na „algierskie”. Ustawiliśmy „kolor tła” w formie RGB i ustawiamy ją jako „RGB (235, 235, 125)”, który wygląda jak żółty kolor.

Tutaj wyjście pokazuje, że pierwsza lista jest prosta i nie ma żadnej zmiany w pierwszej liście, że nie jest wybrana, ponieważ jest obecna przed akapitem i nie jest poprzedzona „P”. Pozostałe dwie listy są stylizowane, ponieważ obie listy są poprzedzone „P”. Te dwie listy są obecne po akapicie, więc są wybierane, a następnie stylizowane.

Przykład nr 4:

Możesz zobaczyć tutaj, stworzyliśmy jedną div i nagłówek w tym. Następnie dwa akapity poza tym Div. Below this, we have one more div and heading same as above and created two paragraphs.

Używamy „Div” jako pierwszego selektora, a następnie Tilde, a następnie „P” jako drugiego selektora. Potrzeba wszystkie akapity, po których następuje Div. „Tło”, które tutaj ustawiliśmy, to „RGB (111, 212, 111)”, który ma jasnozielony kolor. Używamy „niebieskiego” jako „koloru”, więc tekst będzie wyglądał „niebieski”. Dostosujemy go również do „środka” linii. A „Georgia” jest „rodziną czcionki”, jak wybraliśmy tutaj. „Bold” również ten tekst, używając „Bold” jako wartości „Waseight Font”. Tym razem „rozmiar czcionki” to „25px” i jest także „kursywa” w „stylu czcionki”.

Wszystkie akapity są wybierane na wyjściu, ponieważ wszystkie akapity są poprzedzone przez Div . Tak więc wybiera wszystkie akapity i widzimy, że wszystkie zastosowane właściwości są stosowane do tych akapitów. Selektor Tilde pomaga w wyborze wszystkich akapitów, po których następują Div i stosowanie właściwości wewnątrz kręconych aparatów ortodontycznych.

Wniosek:

Przedstawiliśmy ten samouczek do nauki selektora Tylde w CSS. Tutaj omówiliśmy, co to jest selektor Tilde i jak korzystać z tego selektora Tilde w CSS i jak to działa. Umieściliśmy pierwszy selektor, a następnie selektor tilde, a następnie drugi selektor. Jak wyjaśniliśmy, że wybiera drugi selektor, po którym następuje pierwszy selektor za pomocą selektora Tilde. W tym samouczku pokazaliśmy wiele przykładów.