Домашня » Кодування » Подивіться в CSS3 перший в структурі селектор

    Подивіться в CSS3 перший в структурі селектор

    Ця стаття є частиною нашої "Серія навчальних посібників HTML5 / 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 і нижче). Ви також можете завантажити вихідний файл для подальшого вивчення. Насолоджуйтесь.

    • Демо
    • Завантажити джерело