Тип - CSS-трикове

Anonim

Селектор на тип (понякога наричан селектор на тип елемент) съвпада с елементи със съответното име на възел на елемент, като например

, , и тагове. Обикновено селекторите на типове се използват за извършване на промени в стила на даден сайт.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Обща употреба

Често пъти селекторите на тип се задават по подразбиране, например при нулиране на CSS, където намерението е да се заменят настройките по подразбиране на браузъра. Пример от първия ред на normalize.css, популярно CSS нулиране:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )

Селекторите на типове по-горе задават свойството за показване на тези маркери да се блокира, така че всеки път, когато някой от тези маркери се използва в целия сайт, те ще се показват като блок, освен ако не бъдат заменени от по-специфичен стил.

Най-добри практики

Обикновено се счита за лоша практика да се прилагат фини детайлни промени само с Type Selector. Например, прилагането на свойството „цвят: бяло“ на всички етикети рядко би било нещо полезно за който и да е сайт. Това е така, защото таговете са общи и се използват в различни сайтове за различни цели.

Въпреки това, с Type Selector, като например body ( ), задаване по подразбиране font-size и line-heightе често срещано. Това се дължи отчасти на факта, че на дадена страница може да има само един маркер, така че има по-малко възможности за конфликти.

Специфичност и производителност на селектора на типове

Селекторите на типове са на най-ниското ниво на каскадата на специфичността (обикновено се записват като 0, 0, 0, 1), което означава, че почти всичко ще замени стила, прилаган само чрез Type Selector, и добавяне на Type Selector към клас или ID в вашият CSS осигурява минимална допълнителна специфичност.

Селекторите на типове също се класират по-ниско по скалата за ефективност на CSS, отколкото класовете и идентификаторите. Следователно технически по-добрият избор на производителност е да се използва клас или идентификатор, а не по-общият Type Selector (въпреки че реалната разлика в скоростта обикновено е незначителна).

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Всякакви Всякакви Всякакви Всякакви Всякакви Всякакви Всякакви