Jak wybrać element w CSS, jeśli nie znamy jego klasy lub identyfikatora

Suscríbete a mi kanał:  

Wykorzystane zasoby:

Pomoc dotycząca Stackoverflow

Pomoc dotycząca odniesienia do selektora CSS

Transkrypcja wideo

Cześć chłopaki, jak się masz?

W tym filmie zobaczymy, jak możemy zmodyfikować styl, projekt dowolnego formularza lub dowolnego innego elementu naszej strony internetowej, jeśli nie mamy identyfikatora i klasy.

Zobaczymy, jak to zrobić przez css, jeśli brakuje nam tych elementów, klasy lub identyfikatora.

Jest to coś, o co pytał mnie student i zobaczymy, jak można to zrobić, wydaje mi się to bardzo interesujące i dlatego chciałem wam pokazać, że to się robi w bardzo prosty sposób, także do zrobienia skorzystamy z pomocy iw tym przypadku zobaczymy, że oprócz identyfikatorów i klas możemy wywoływać poprzez atrybuty.

Więc dzięki temu możemy to zrobić, nie bój się wszystkiego, co tu widzisz, bo zrobimy to w bardzo prosty sposób, w tym przypadku zmodyfikuję ten tag, w tagu z imieniem, ale nie nie chcę, aby tag e-mail był modyfikowany, więc jeśli kliknę prawym przyciskiem myszy, sprawdź, czy mogę zobaczyć kod źródłowy w chrome.

W tym przypadku, jeśli zdajesz sobie sprawę, że ta etykieta ma klasę, ale nie zamierzam jej używać, wyobraź sobie, że nie ma tej klasy, jest to bardzo proste, w rzeczywistości, jeśli ją wybrałem i tutaj kliknę więcej wygeneruje regułę już z napisaną klasą ale w tym przypadku mam zamiar usunąć klasę bo wyobrażam sobie że ona nie istnieje, a więc dzięki atrybutowi, w tym przypadku FOR, który jest atrybutem, który mamy tutaj.

Jeśli zdamy sobie sprawę, że atrybut ma wartość input_2_8, jeśli na przykład wybiorę tag e-mail, zobaczymy, że ma on wartość input_2_2, to znaczy każdy z tych tagów ma inną wartość, więc mogę zmodyfikować jeden, a nie resztę.

Tak jak powiedziałem, zamierzam wybrać w tagu nazwy i stworzymy regułę, nie będę używał tej klasy, a to, co zamierzam zrobić, to: otwieram nawiasy kwadratowe, zamykam nawiasy kwadratowe a tu w środku dodam, że gdy atrybut for jest to samo otwieram i zamykam cudzysłowy, chociaż jak bym tego nie robił to też by zadziałało i stawiam że jest równe input_2_8 , zamierzam powiedz mu, że chcę, aby kolor był równy czerwieni, czyli czerwieni.

Zwróć więc uwagę, że tylko ta etykieta została zmodyfikowana, reszta pozostaje taka sama.

Udało mi się tutaj użyć etykiety, ale dzięki atrybutom udało nam się to zmodyfikować i jest to również bardzo interesujące, ponieważ jeśli dowiemy się tutaj w pomocy, można zrobić coś, co może być jeszcze bardziej przydatne.

Mogę sobie wyobrazić, że chcę tylko zmienić kolor lub umieścić ikonę, na przykład, gdy jest to link do pliku PDF lub gdy ma określony adres URL, na przykład, jak widać tutaj, abyśmy mogli to zrobić, aby zmienić dowolny z atrybuty w tym przypadku zamierzam skorzystać z tej reguły i zobaczysz, jak to działa.

Jeżeli wchodzę tutaj na moją stronę to widzimy że mam link, w tym przypadku mam link który jest tutaj i jak widać nie mam klasy, identyfikatora tego linku jak mógłbym go zmodyfikować, no zauważ jeśli kliknę w ten sposób W tym przypadku, jeśli zrobię tylko regułę dla wszystkich linków, wszystkie zostaną zmodyfikowane, ale nie chcę, aby były modyfikowane wszystkie, chcę tylko te linki, które mają np. , w linku napisanym jako tworzenie strony.

Na przykład to, co mogę tutaj zrobić, to otworzyć nawiasy kwadratowe i je zamknąć.Lubię je zamykać na początku, aby nie zapomnieć, i proszę, aby gdy występuje atrybut href, wstawię gwiazdka na nim jak widzieliśmy w pomocy za wszystko co tu jest w środku i powiem ci tak piszę nawias otwieram i zamykam wstawiam href gwiazdkę tak samo otwieram i zamykam cudzysłowy i tu jestem powiem na przykład, że można by napisać, jak zrobić stronę, a tutaj powiem, że chcę, aby kolor też był na przykład czerwony i widać, że się zmienił.

Co więcej, jeśli powiem ci tutaj, aby zmienić linki, gdy link jest jak zrobić stronę, wstawiam tu coś innego, zobaczysz, że to się nie zmienia, ponieważ zamiast tego nie jest tam napisane coś innego, jeśli wstawię tutaj przykład po prostu Jak zrobić stronę to działa.

Możemy więc być konkretni, aby nie było więcej przypadków, ale widzimy, że nie zawsze potrzebujemy klasy lub identyfikatora, aby móc modyfikować rzeczy za pomocą css.

Myślę, że może nas to wyciągnąć z wielu kłopotów, dlatego przedstawiam ci ten tutorial, mam nadzieję, że Ci się spodobał, do zobaczenia następnym razem 😉

Chcesz dowiedzieć się więcej? Wejdz do Strefa Premium

Zostaw komentarz