[CSS/DIV] Проаналізуйте використання чотирьох основних селекторів значення атрибутів CSS

Ця стаття опише це вамСелектор значень властивостей CSSФормат селектора атрибутів — це елемент із дужками, з атрибутами в дужках або виразами атрибутів (не знаю, чи правильний опис, власноруч створені слова), такі як h1[title], h1[title="logo"] тощо, я вірю, що ви багато чого дізнаєтеся в цій статті.

CSS-туторіал: Вибір значення атрибутів CSS

CSS AttributeSelectors, можливо, вам не варто бути знайомим із селекторами атрибутів, по суті, id і class selectors — це селектори значення атрибутів, просто виберіть id або значення класу.

Формат селектора атрибутів — це елемент, за яким слідують дужки, з атрибутами в дужках, або виразами атрибутів (я не знаю, чи опис правильний, власноруч створені слова), такі як h1[title], h1[title="Logo"] тощо, нижче ви можете побачити 4 конкретні форми з мого обговорення.

1. Простий селектор значення атрибутів CSS

Незалежно від назви, це характеристика простого селектора атрибутів.

h1[class]{колір:срібляст; Діє на будь-який елемент H1 з класом, незалежно від значення класу. Отже<h1class="hoopla">Привіт</h1>, <h1class="серйозний">Спокій</h1>, <h1class="фантазія"> h1 Fooling</h1> буде впливати на це правило.

Звісно, ця «властивість» — це не просто клас або id, а всі легітимні властивості елемента, наприклад, alt у img, наприклад img[alt]{cssdeclarationshere; застосовується до будь-якого елемента IMG з атрибутом alt. Потім a[href][title]{font-weight:bold; А як щодо }? Як ви знаєте, це працює з елементами з атрибутами як href, так і титулу, такими як <atitle="W3CHome">W3C</a>.

2. Точний селектор значення атрибутів CSS

id і class по суті є точними селекторами значення атрибутів, так, h1#logo дорівнює h1[id="logo"]. Як уже згадувалося, ми не обмежуємося id чи класом, ми можемо використовувати будь-яку властивість! Наприклад, a[][title="W3CHome"]{font-size:200%; } буде застосовуватися до <atitle="W3CHome">W3C</a>.

3. Деякі селектори значення атрибутів CSS

Як випливає з назви, якщо значення атрибута частково збігається (у цьому випадку частина, яка фактично відповідає всьому слову), діятиме на елемент. Розглянемо приклад:

Будь-який із них може зробити шрифт p жирним.

Цей селектор дуже корисний, наприклад, якщо ви хочете стилізувати ілюстрацію рядком "Figure" у назві, наприклад title="Image5:xxx description", ви можете використовувати img[title~="Figure"].

Слід зазначити, що, як я підкреслив у першому реченні, потрібно зіставити все слово, і img[title~="Figure"] не збігається з title="Image5:xxx description".

Також я зробив невеликий тест: у прикладі змінюєш «Figure» на «Illustration», а img[title~="Figure"] змінюєш на img[title~="Illustration"], і у Firefox все одно співпадає, незалежно від того, чи кодування GB2312 чи UTF-8. Схоже, підтримка CSS для китайської мови непогана.

4. Спеціальний селектор значення атрибутів CSS

Трохи дивно, цей селектор. Це працює так: легше навести приклад, ніж описати.

*[lang|="en"]{колір:білий; Це правило вибере значення атрибута lang або елемента, що починається з en-. Тобто він може відповідати <h1lang="en">Привіт!</h1>, <plang="en-us">Вітання!</p>і <divlang="en-au">Привіт!</div>і не збігається<plang="fr">Bonjour!</p>та <h3lang="cy-en">Jrooana!</h3>.