Css по атрибуту: Селекторы атрибутов — CSS | MDN

Leave a Comment / Css / By /
=»#»] {background-color:gold} /* Все ссылки с url заканчивающимся на .cn будут красными */ a[href$=».cn»] {color: red;} /* Все ссылки содержащие «example» в url будут иметь серый фон */ a[href*=»example»] {background-color: #CCCCCC;} 
<div>
    <a href="http://example.com">English:</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div>
    <a href="#portuguese">Portuguese:</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div>
    <a href="http://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好！</span>
</div>
<div>
    <a href="http://example.cn">Chinese (Traditional):</a>
    <span lang="zh-TW">世界您好！</span>
</div>
Specification
Selectors Level 4
# attribute-selectors

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • CSS селекторы: базовая поддержка браузерами
  • Совместимость с браузерами селекторов и псевдо-селекторов CSS

Last modified: , by MDN contributors

Селекторы атрибута — Изучение веб-разработки

  • Назад
  • Обзор: Building blocks
  • Далее

Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.

Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:Узнать, что такое селекторы атрибута и как их использовать.

Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.

В приведённом ниже примере вы можете увидеть использование этих селекторов.

  • Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
  • li[class="a"] выбирает селектор с классом a, но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.
  • li[class~="a"] выберет класс a
    , а также значение, которое содержит класс a как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. =»a»] выбирает все значения атрибута, которые начинаются с a, что соответствует первым двум элементам списка.

  • li[class$="a"] выбирает все значения атрибута, которые заканчиваются на a, что соответствует первому и третьему элементу списка.
  • li[class*="a"] выбирает все значения атрибута, где появляется a, независимо от положения в строке, что соответствует всем элементам нашего списка.

    • Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

    В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.

    Примечание: Существует также более новое значение s, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

    Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о псевдоклассах и псевдоэлементах.

    • Назад
    • Обзор: Building blocks
    • Далее
    1. Каскад и наследование
    2. Селекторы CSS
      • Селекторы типа, класса и ID
      • Селекторы атрибута
      • Псевдоклассы и псевдоэлементы
      • Комбинаторы
    3. Модель коробки (The box model)
    4. Фон и границы
    5. Обработка разных направлений текста
    6. Переполнение содержимого
    7. Значения и единицы измерения
    8. Изменение размеров в CSS
    9. Элементы изображений, форм и медиа-элементы
    10. Стилизация таблиц
    11. Отладка CSS
    12. Организация вашей CSS

    Last modified:

    000Z»>27 окт. 2022 г., by MDN contributors

    CSS [атрибут=значение] Селектор

    ❮ Предыдущий Справочник по селекторам CSS Далее ❯


    Пример

    Стиль элементов с target=»_blank»:

    a[target=_blank] {
    цвет фона: желтый;
    }

    Попробуйте сами »

    Другие примеры «Попробуйте сами» ниже.

    Определение и использование

    Селектор [ атрибут = значение ] используется для выбора элементов с указанным атрибутом и значением.

    Версия: CSS2

    Поддержка браузера

    Цифры в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

    Селектор
    [ атрибут = значение ] 4,0 7,0 2,0 3. 1 9,6

    Синтаксис CSS

    [ атрибут = значение ] {
      объявления css ;
    } Демонстрация

    Дополнительные примеры

    Пример

    Когда получает фокус, постепенно меняйте ширину от 100 пикселей до 250 пикселей:

    input[type=text] {
      ширина: 100 пикселей;
      переход: плавность входа-выхода, ширина 0,35 с плавного входа-выхода;
    }

    ввод[тип=текст]:фокус {
      ширина: 250 пикселей;
    }

    Попробуйте сами »

    Связанные страницы

    Учебник CSS: Селекторы атрибутов CSS

    ❮ Предыдущая Справочник по селекторам CSS Далее ❯


    НОВИНКА

    Мы только что запустили
    Видео W3Schools

    Узнать

    ВЫБОР ЦВЕТА
    КОД ИГРЫ

    Играть в игру

    Лучшие учебники
    Учебное пособие по HTML
    Учебное пособие по CSS
    Учебное пособие по JavaScript
    Учебное пособие
    Учебник по SQL
    Учебник по Python
    Учебник по W3. CSS
    Учебник по Bootstrap
    Учебник по PHP
    Учебник по Java
    Учебник по C++
    Учебник по jQuery

    Лучшие ссылки
    Справочник по HTML
    Справочник по CSS
    Справочник по JavaScript
    Справочник по SQL
    Справочник по Python
    Справочник по W3.CSS
    Справочник по Bootstrap
    Справочник по PHP
    Цвета HTML
    Справочник по Java
    Справочник по Angular
    Справочник по jQuery


    6 Лучшие примеры0117 Примеры HTML
    Примеры CSS
    Примеры JavaScript
    Примеры инструкций
    Примеры SQL
    Примеры Python
    Примеры W3.CSS
    Примеры Bootstrap

    Примеры PHP
    Примеры Java
    Примеры XML
    Примеры jQuery


    FORUM | О

    W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

    Copyright 1999-2022 Refsnes Data. Все права защищены.
    W3Schools работает на основе W3.CSS.

    CSS [атрибут*=значение] Селектор

    ❮ Предыдущий Справочник по селекторам CSS Далее ❯


    Пример

    Установить цвет фона для всех элементов

    , имеющих значение атрибута класса содержащий «тест»:

    div[class*=»test»] {

    фон: #ffff00;
    }

    Попробуйте сами »

    Другие примеры «Попробуйте сами» ниже.

    Определение и использование

    Селектор [ атрибут* = значение ] соответствует каждому элементу, чье значение атрибута содержит указанное значение .

    Версия: CSS3

    Поддержка браузера

    Цифры в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

    Селектор
    [ атрибут* = значение ] 4,0 7,0 3,5  3,2 9,6

    Синтаксис CSS

    атрибут *= значение {
      объявления css ;
    } Демонстрация

    Другие примеры

    Пример

    Установка цвета фона для всех элементов, имеющих значение атрибута класса содержащих «тест»:

    [класс*=»тест»] {
    фон: #ffff00;
    }

    Попробуйте сами »

    Связанные страницы

    Учебник CSS: Селекторы атрибутов CSS

    ❮ Предыдущая Справочник по селекторам CSS Далее ❯


    НОВИНКА

    Мы только что запустили
    Видео W3Schools

    Узнать

    ВЫБОР ЦВЕТА
    КОД ИГРЫ

    Играть в игру

    Лучшие учебники
    Учебник HTML
    Учебник CSS
    Учебник по JavaScript
    How To Tutorial
    Учебник по SQL
    Учебник по Python
    Учебник по W3. CSS
    Учебник по Bootstrap
    Учебник по PHP
    Учебник по Java
    Учебник по C++
    Учебник по jQuery

    1 Top References HTML Reference
    CSS Reference
    JavaScript Reference
    SQL Reference
    Python Reference
    W3.CSS Reference
    Bootstrap Reference
    PHP Reference
    HTML Colors
    Java Reference
    Angular Reference
    Справочник по jQuery

    Основные примеры
    Примеры HTML
    Примеры CSS
    Примеры JavaScript
    Примеры инструкций
    Примеры SQL
    Примеры Python
    Примеры W3.CSS
    Примеры Bootstrap
    Примеры PHP
    Примеры Java
    Примеры XML
    Примеры jQuery


    FORUM | О

    W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *