Подивіться в CSS3 перший в структурі селектор
Одна річ, яку я люблю про CSS3 - це нове доповнення селекторів, які дозволяють нам орієнтуватися на елементи конкретно, не покладаючись на клас, id або інший атрибут елемента, і той, який ми розглянемо тут, є наступним селектором, : перший тип.
The : перший тип Селектор буде націлювати першу дочку зазначеного елемента, наприклад, фрагмент нижче буде націлений на перший h2 на веб-сторінці.
h2: декларація стилю першого типу / * * /
The : перший тип також дорівнює : nth-of-type (1), тому замість вибору лише спочатку типу, ми можемо додатково вибрати другий, третій і так далі. Наступний фрагмент буде націлено на друге h2 на веб-сторінці.
h2: декларація стилю nth-of-type (2) / * * /
: перший тип” проти. “: перша дитина”
Це може здатися, що ці два селектори роблять те ж саме, але це не так. Давайте розглянемо наступну демонстрацію:
Припустимо, що ми маємо п'ять елементів абзацу, обгорнуті в a div, подобається це:
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
Тепер ми хотіли б вибрати перший абзац за допомогою : перша дитина селектора.
p: перша дитина заповнення: 5px 10px; кордон-радіус: 2px; фон: # 8960a7; колір: #fff; кордон: 1px твердий # 5b456a;
І, як ми очікували, перший абзац успішно обраний.
- : демонстрація першої дитини
Однак, коли ми додати інший елемент раніше перший абзац, скажімо, a h1, як фрагмент нижче:
Заголовок 1
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
перший абзац не буде вибрано, як перша дитина всередині div є більше не є абзацом, але зараз є h1.
Отже, це ситуація, коли : перший тип приходить селектор для вирішення проблеми.
p: first-of-type padding: 5px 10px; кордон-радіус: 2px; фон: # a8b700; колір: #fff; кордон: 1px суцільний # 597500;
- : демо-версія першого типу
The “Останній” Селектор
Де є “спочатку”, тоді також буде “останній”.
Реверс двох селекторів, які ми обговорювали вище, є наступними двома селекторами; : остання дитина і : останнього типу. Вони в основному такі ж, як і вищезазначені, за винятком того, що вони цільові остання дитина зазначеного елемента.
Наприклад, цей фрагмент нижче буде націлений на останній абзац всередині div.
p: last-child padding: 5px 10px; кордон-радіус: 2px; фон: # 8960a7; колір: #fff; кордон: 1px твердий # 5b456a;
- : Демо останньої дитини
Цей фрагмент також буде націлений на останній абзац у тій самій ситуації, як ми обговорювали вище; на цей раз слідує безпосередньо інший елемент.
p: last-of-type padding: 5px 10px; кордон-радіус: 2px; фон: # a8b700; колір: #fff; кордон: 1px суцільний # 597500;
- : Демонстрація останнього типу
Selectivizr
Як і будь-яка інша нова функція CSS3, ці селектори не підтримуються в основному старими браузерами Internet Explorer від 6 до 8, з виключенням для : перша дитина селектор, як це було додано після CSS2.1. Її відносна : остання дитина додано лише в CSS3.
Отже, якщо всі ці селектори, про які ми згадували, дійсно потрібні для вашого веб-сайту, можна скористатися покликаною бібліотекою JavaScript Selectivizr для емуляції функціональності селектора CSS3.
Selectivizr залежить від інших бібліотек JavaScript для роботи, таких як jQuery, Dojo, Prototype і MooTools; і, побачивши з таблиці порівняння на офіційному сайті, MooTools, здається, здатний обробляти всі селектори.
Отже, давайте включимо його разом з Selectivizr наступним чином:
Вищезгаданий умовний коментар гарантує, що ці бібліотеки будуть завантажені тільки в Internet Explorer 8 і нижче.
Нарешті, ви можете переглянути демо з наступних посилань, і він повинен працювати як у сучасних, так і в старих браузерах (IE8 і нижче). Ви також можете завантажити вихідний файл для подальшого вивчення. Насолоджуйтесь.
- Демо
- Завантажити джерело
