Selektory CSS to specyficzna struktura CSS, która pozwala wybrać określony element w kodzie HTML i stylizować go. Każda z nich ma własną specyfikę, tzn. Może nakładać się na właściwości innych, bardziej "słabych".

Selektor CSS według znaczników i klasy

Najprostsze selektory - według znaczników i klasy. Selektor na tagu jest najbardziej powszechny i ​​wybiera wszystkie elementy z określonym znacznikiem. Na przykład możesz napisać właściwości kodu CSS o następującej postaci: p {color: blue} ", gdzie" p "jest znacznikiem akapitu, a właściwość color: blue oznacza kolor tekstu. W rezultacie tekst w akapitach będzie niebieski. Selektory za pomocą znacznika można zliczać przecinkami, wtedy nie trzeba będzie pisać właściwości dwukrotnie.


Jeśli niektóre klasy mają przypisaną określoną klasę, na przykład "niebieski", to selektor CSS można jeszcze bardziej precyzyjnie dopasować. Ale jego wpis we właściwościach będzie inny - punkt pojawi się przed nazwą klasy. To znaczy, aby zaznaczyć wszystkie akapity, które są przypisane do niebieskiej klasy i pokolorować je na niebiesko, właściwości CSS powinny być napisane w następujący sposób: ".blue: {color: blue}". Ten selektor jest bardziej szczegółowy niż selektor CSS według znacznika i jest silniejszy od niego, ale jest najprostszy. Istnieją bardziej złożone reguły, które pozwalają wybrać małe grupy elementów.

Cechy selektorów z identyfikatorem

Selektory dla id lub id są bardziej szczegółowe niż klasa i atrybut. Oznacza to, że gdy są używane w kaskadzie, będą "przeważać" inne podobne selektory. Identyfikatory pomagają również precyzyjnie wybieraćpewien element kodu, ale ich użycie w projektowaniu stron jest uważane za złą praktykę wśród planistów. Tylko w bardzo rzadkich przypadkach, takich jak tworzenie suwaka na CSS, praktyka ta jest niedopuszczalna. Faktem jest, że na jednej stronie może istnieć tylko jeden element o określonym identyfikatorze. Dlatego, ze względu na wyjątkowość selektora identyfikatora CSS, można go używać tylko dla jednego elementu. W takim przypadku używanie klas, a nie identyfikatorów jest o wiele bardziej logiczne.

Różne przemyślenia na temat selektora według id

Ale jest też przeciwny widok, że identyfikator pomaga zidentyfikować fragment kodu na stronie, która powinna znajdować się w pojedynczej instancji. W takim przypadku, mimo że przełączniki klas mogą je zastąpić, powinny być używane w przypadku dużych grup elementów, a tam, gdzie wymagana jest dokładność, lepiej użyć id. Każdy rzemieślnik ma prawo do wypracowania własnej opinii na ten temat i napisania kodu w swoim stylu. Podczas wpisywania selektora według id używany jest przed nim symbol "#". Oznacza to, że linia kodu będzie wyglądała następująco: "#blue: {color: blue}". W tym wpisie przedmiot z identyfikatorem #blue zostanie pomalowany na niebiesko.

Korzystanie z kaskady

Używając selektorów HTML CSS na id, możesz również użyć właściwości kaskady. Na przykład, jeśli wewnątrz znacznika z identyfikatorem chcesz wybrać znacznik podrzędny i zmienić jego właściwości, najpierw musisz zapisać nazwę identyfikatora z siatką, następnie znacznik podrzędny i jego właściwości.Selektory te są nazywane zagnieżdżonymi. Oznacza to, że linia kodu będzie wyglądała mniej więcej tak: #id p {color: blue}. Następnie kolor tekstu wewnątrz elementu nadrzędnego z tym identyfikatorem w akapicie podrzędnym zmieni się na niebieski.

Używanie selektorów elementów podrzędnych

Inna opcja wykorzystania kaskady do zmiany właściwości elementów potomnych jest używana, jeśli wystarczy wybrać konkretną część kodu. Jest również nazywany selektorem potomków. Na przykład, aby wybrać akapit wewnątrz wiersza tabeli, używany jest następujący selektor CSS: "ul li & gt; p: {color: blue} ". Warto zwrócić uwagę na to, że im dłuższy zapis, tym większe prawdopodobieństwo, że będzie można zmienić jakąś określoną właściwość elementu, ponieważ staje się on bardziej priorytetem kaskady. Na przykład elementy z kilkoma innymi właściwościami nadrzędnego selektora CSS nie zmienią swoich właściwości w całości. Tylko część tekstu na liście jest malowana.

Wybór elementów siostrzanych

Kolejny ciekawy sposób wykorzystania kaskadowania - kolejne selektory CSS. Są one rejestrowane jako suma selektorów: "span + a {color blue}". W tym przypadku sąsiadem jest ten, pod którym istnieje inny, odpowiadający wymaganym parametrom. Tak więc, jeśli w kodzie występują trzy elementy, właściwość ta nie ma zastosowania do pierwszej, ponieważ nie ma sąsiada i do wszystkich kolejnych - tak. Dzieje się tak za pomocą ikony ilości, gdy tworzone są następujące selektory, a nie poprzednie. Ten wpis pomaga zredukować kod i nie rejestruje wielu selektorów CSS dla różnychtagi, stosując te same właściwości. Jeśli drugi element listy, aby określić dodatkową klasę i zmienić wpis «.class + a {color blue}», podczas liczenia weźmie od niego i zmieniać właściwości tych elementów pasuje do reguły, a pierwsze dwa pozostają takie same.

Załóżmy teraz, że nasz kod jest taki sam znak z trzech różnych klas i wybrać wszystkie pozycje po pewnym. W takim przypadku użycie tylko selektorów znaczników CSS nie będzie działać. W tym celu używany jest selektor następującego typu: ".class ~ div". To wybiera elementy z tagiem div, które idą po danej klasie. Jeśli zdecydujemy się nie tylko przedmioty z div tag, ale wszystko to zamiast znacznika po znaku tyldy należy umieścić gwiazdkę - „*”. Taki zapis oznacza, że ​​musisz wybrać wszystko, co następuje po danej klasie. Możesz wybrać wszystkie elementy na stronie, jeśli zostawisz gwiazdkę jako selektor.

Selektory na CSS-atrybutem

Załóżmy, że w naszym kodzie zawiera elementy z pewnych atrybutów, ale wszystkie one są różne od siebie i są pisane z myślnikiem, a my musimy wybrać te z nazwą klasy zaczyna się od pewnych słów na przykład "selektor", a klasy są oddzielone znakiem "-". Co powinienem zrobić w tym przypadku? selektor rekordu zaczyna ze wspornikami, gdzie pierwszy nagrany atrybut name, a następnie pionowo ukośnik znak „=” oraz «selektor»: «teleinformatyczny | = selektor». Następnie piszemy pożądaną właściwość, którą chcemy zmienić. W rezultacie przedmiot jest wybierany z podanymiparametry. Zmieniając klasy, możesz zmienić właściwości niektórych części kodu. Jeśli nazwy klas nie są zapisywane łącznikiem, ale jednym słowem, można je również wybrać, ale z użyciem nieco innego rekordu. W takim przypadku pionowy ukośnik zostanie zastąpiony symbolem "^": "data ^ = selektor". Ten selektor wybiera podłańcuch z początkiem nazwy klasy.

Jak wybrać element z określonym celu w imieniu klasy

Teraz zrobić inaczej i wybrać części kodu od początku opisów klasy, a ostatnią literę jego imienia. Aby to zrobić, potrzebujemy odznakę dolara. Umieszczamy go na miejscu, a po znaku równości zapisujemy koniec nazwy klasy: "data $ = ctor". Teraz elementy z tą kombinacją liter zostaną wybrane, a niektóre właściwości zostaną do nich zastosowane. Możesz wybrać dowolny atrybut. Przyjrzyjmy się, jak to zrobić, jeśli potrzebujemy znaleźć element z jakąś kombinacją liter w środku słowa. W tym przypadku zmienimy znak dolara na gwiazdkę, a po znaku równości wpisujemy litery: "data * = ct".

Pseudo - specjalne selektorów

Specjalne odniesienia powszechnie stosowanych selektorów CSS-style, które odzwierciedlają ich inny warunek: uspokajające, skupiony, aktywnych podróżował - są zwane pseudo-klas. Pseudo-klasa dla aktywnego łącza, do którego kursor jest wyświetlany, jest zapisana jako "a: active". Dalsze istnieją pewne właściwości często zmienić tło lub cień dodany. Jeśli dodać tę właściwość do kliknięcia łącza i to, że zmienił swój kolor, aby ustawić. Kolejny pseudo - unoszą pokazuje, że związek minęło.Jest rejestrowane jako "a: hover".

Cechy stanów aktywnych i skupienia

Aktywne są często mylone z innym państwem - skupienie. Zapisuje się w następujący sposób: "a: focus" i wskazuje aktywny stan przycisku podczas pracy z klawiaturą. Oznacza to, że jeśli użyjesz klawisza TABLES, aktywny link zostanie podświetlony w specjalnym kolorze. Tej właściwości należy użyć, ponieważ używanie myszy do poruszania się po witrynie może nie obejmować wszystkich użytkowników. Niektórzy mogą mieć słabe widzenie lub inne ograniczenia zdrowotne, więc poruszają się po stronie za pomocą kluczy lub specjalnych gadżetów. Ignorowanie statusu przycisku jest bardzo niekorzystne dla takiego parametru w projekcie strony, jako dostępności i ma znaczący wpływ na jego obecność przez szczególną kategorię użytkowników. Dzięki zwykłej nawigacji za pomocą myszy, połączenie staje się aktywne i ostre. Dlatego podczas stylizowania elementów należy zwrócić na to uwagę.

Pseudoelementy

Pseudoelementy umożliwiają określenie specjalnych stylów bez definiowania ich w samej strukturze HTML. Są one rejestrowane w następujący sposób: nazwa selektora, znak "::", nazwa pseudoelementu. Najczęstsze elementy "przed" i "po". Mają właściwość "treści", nie mogą być stosowane do stylów wewnętrznych. "Po" jest wymagane, aby dodać trochę treści po zawartości konkretnego elementu. To, co dokładnie należy wstawić, jest wpisane do właściwości "treści". Podobnie pseudoelement "before" dodaje treść do zawartości elementu. Korzystanie z tych specjalnych selektorów pozwala zmniejszyć kod i nie zapisywać za każdym razem nowegostrukturę dla jakiejś części, jeśli chcesz dodać mały szczegół do określonego miejsca kontenera. Są często używane podczas stylizowania stron i dodawania elementów dekoracyjnych. Kombinacje tych wszystkich opcji pomagają tworzyć niezwykłe efekty na stronie i bardzo pomagają rzemieślnikowi.