Selektory CSS. typy selektorów

, z których każda chcesz ustawić określony kolor. Jak to zrobić? Standardowe selektorów CSS nie nadają się do tagów, wskazują parametry dla wszystkich bloków naraz. Rozwiązanie to jest proste. Przypisywanie członków klasy. Na przykład, pierwszy otrzymał div class = 'red', drugi – class = 'blue', trzeci – class = 'green'. Teraz mogą być wybierane za pomocą tabel CSS.

Składnia jest następująca: Wskazuje punkt ( „”), a następnie napisanie nazwy klasy. Aby zarządzać pierwszą jednostkę, należy budowę .red. Po drugie – .blue i tak dalej.

Ważne! Zaleca się używać sensownych wartości atrybutu klasy. Uważa się, zła forma używać transliteracji (np krasiviy-Blok) lub losowych kombinacji liter / cyfr (ojfh834871). W tym kodzie, jesteś zobowiązany do pomylić, nie wspominając już o trudności, które napotykają ci, którzy będą zaangażowani w projekt po ciebie. Najlepszym rozwiązaniem – aby użyć dowolnej metody, takie jak BEM.

Zalety – stosunkowo duża elastyczność.

Wady – wielokrotne elementy mogą być jedna i ta sama klasa, co oznacza, że będą edytowane jednocześnie. Problem ten jest rozwiązany za pomocą metodyki, jak również spadku preprocesorów. Pamiętaj, aby dostać się w ręce mniej, Sass lub innego preprocesora, ale znacznie ułatwiają pracę.

selektor ID

O tej wersji koderzy opinii i programiści są niejednoznaczne. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Niektóre tutoriale CSS nie zaleca używania ID, ponieważ w niedokładnego stosowania mogą powodować problemy z dziedziczenia. Jednak wielu ekspertów są aktywnie zorganizować je w całym układzie. Ty decydujesz. # »), затем имя блока. Składnia jest następująca: znak krzyżyka ( „#”), a następnie nazwę bloku. #red. Na przykład, #red.

отличается от класса по нескольким параметрам. ID różni się od klasy na kilka sposobów. ID. Po pierwsze, strona nie może być dwa identyczne ID. Przeznaczone są unikalną nazwę. Po drugie, na przykład wybierak ma wyższy priorytet. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Oznacza to, że jeśli określić klasę jednostki czerwony i określić w tabelach CSS czerwony kolor tła, a następnie przypisać do niego ten sam identyfikator niebieski i określić kolor niebieski, jednostka zmieni kolor na niebieski.

Zalety – można kontrolować konkretny element, ignorując style tagów i klas.

ID и class. Wady – łatwo się zgubić w dużej liczbie ID i klasy.

Ważne! ID вам, в общем-то, не нужны. Jeśli używasz metody BEM (lub jego odpowiednika), identyfikator do ciebie w ogóle nie są potrzebne. Technika ta polega na wykorzystaniu układu unikatowych klas, które znacznie wygodniejsze.

selektor uniwersalny

{}. Składnia: Starlets znak ( "*") i szelki, czyli {*} …

Służy do przypisywania pewnych atrybutów raz wszystkie elementy strony. Gdy ta może być przydatna? box-sizing: border-box. Na przykład, jeśli chcesz ustawić właściwość strona box-zaklejanie: border-box. div *{}. Nie mogą być wykorzystywane wyłącznie do zarządzania wszystkie elementy dokumentu, ale również kontrolować wszystkie dzieci w określonym bloku, na przykład div * {}.

Zalety – można kontrolować wiele elementów jednocześnie.

Przeciw – nie wystarczy opcja elastyczny. Ponadto, korzystanie z tego wybieraka, w niektórych przypadkach spowolnić pracę strony.

przez atrybuty

Pozwalają kontrolować elementu z konkretnego atrybutu. Na przykład, masz wiele tagów wejściowych z innym typem atrybutu. Jeden z nich – tekst, drugi – hasło, trzeci – liczba. Oczywiście, można ustawić każdą klasę lub identyfikator, ale to nie zawsze jest wygodne. selektorów CSS atrybutów pozwalają określić wartości dla niektórych tagów z maksymalną precyzją. Na przykład coś takiego:

Linia [ 'text' Type =] {}

Ten selektor wybierze wszystkie atrybuty z rodzaju tekstu wejściowego.

Narzędzie jest bardzo elastyczny i może być stosowany z dowolnym znaczników, w którym może być atrybutów. Ale to nie wszystko! Specyfikacja CSS ma zdolność kontrolowania elementy z jeszcze większej wygody!

Wyobraź sobie, że Twoja strona ma wejście z zastępczy atrybut = „Wprowadź nazwę” oraz zastępczy wejściowy = „Podaj hasło”. Mogą również być wybierane za pomocą przełącznika! Aby to zrobić, należy wykonać następującą strukturę:

Linia [zastępczy = „nazwy”] {} albo wsad [zastępczy = „wprowadzić hasło”]

Być może bardziej elastyczna praca z atrybutami. Powiedzmy, że masz wiele tagów z podobnymi atrybutami tytuł (na przykład „Caspian” i „Caspian”). Aby wybrać zarówno, należy wykonać następujące pozycje:

[Tytułowy * = "Kaspiysk"]

CSS wybierze wszystkie elementy w tytule których znajdują się symbole „Kaspian”, tj. E. i „Kaspian” oraz „Kaspian”.

Można również wybrać tagi, które zaczynają się przypisuje pewna postać:

[Title ^ = "znak chcesz"] {}

lub wypowiedzieć je:

[Title $ = "right znak"] {}.

Zalety – maksymalną elastyczność. Można wybrać istniejące elementy strony nie brudząc z klas.

Wady – stosowane stosunkowo rzadko, jedynie w szczególnych przypadkach. Wielu projektantów stron internetowych wolą metodologii, ponieważ klasa punkt jest łatwiejsze niż zorganizować liczne kwadratowe nawiasy i znaki „równe”. Ponadto, te przełączniki nie działają w wersji Internet Explorer 7 i poniżej. Jednakże, którzy są teraz potrzebne starego Internet Explorera?

Selektory pseudoklasa

Oznacza element pseudo-stanu. Na przykład ,: zawisu – co dzieje się z części strony po najechaniu ,: odwiedził – odwiedzanego linku. Obejmuje ona również takie elementy jak: pierwszego dziecka i: last-dziecko.

Ten typ selektora aktywnie wykorzystywane w nowoczesnym układzie, ponieważ dzięki nim można zrobić stronę „na żywo”, bez użycia JavaScript. Na przykład, chcesz mieć pewność, że po najechaniu na przycisk z klasą btn jego kolor zmienił. Aby to zrobić, używamy następującą strukturę:

.btn: aktywowania {

background-color: red;

}

Uroda może być określony w podstawowych właściwości przycisku, obiekt przejściowy, na przykład, 0.5s – w tym przypadku, przycisk nie rumienić natychmiast, aw ciągu pół sekundy.

Cnoty – są szeroko stosowane do „ożywienia” stron. Łatwy w użyciu.

Wady – nie są. Jest to bardzo przydatne narzędzie. Jednakże niedoświadczeni projektanci stron internetowych mogą zgubić się w obfitości pseudo-klas. Problem został rozwiązany nauki i praktyki.

pseudo-selektory

„Pseudo” – są to elementy strony, które nie są w HTML, ale nadal można zarządzać. Nie rozumiesz? Jest to o wiele łatwiejsze niż się wydaje. Na przykład, chcesz, aby pierwsza litera w ciągu duży i czerwony, pozostawiając inne małe i czarny tekst. Oczywiście, można stwierdzić, że pismo w rozpiętości z pewnej klasy, ale to długa i nudna. Jest to o wiele łatwiejsze, aby zaznaczyć cały akapit i użyć pseudo :: first-letter. Daje możliwość kontrolowania wyglądu pierwszej literze.

Istnieje dość duża liczba pseudo-elementów. Wymienić je w jednym artykule jest mało prawdopodobne, aby odnieść sukces. można znaleźć odpowiednie informacje w ulubionej wyszukiwarce.

Zalety – zapewniają elastyczność, aby dostosować wygląd strony.

Wady – nowe do nich są często mylone. Wiele pozycje tego typu prac tylko w niektórych przeglądarkach.

podsumować

Selector – to potężne narzędzie do kontroli przepływu dokumentów. Dzięki niemu można wybrać każdy element strony (istnieje nawet tylko częściowo). Koniecznie dowiedz się wszystkie dostępne opcje, a nawet zapisać je w dół. Jest to szczególnie ważne w przypadku tworzenia skomplikowanych stron z nowoczesnym wzornictwem i wiele elementów interaktywnych.