Селекторы атрибутов

Кроме css селекторов элементов мы также можем использовать селекторы их атрибутов. Например, у нас есть на веб-странице несколько полей input, а нам надо окрасить в красный цвет только текстовые поля. В этом случае мы как раз можем проверять значение атрибута type: если оно имеет значение text, то это текстовое поле, и соответственно его надо окрасить в красный цвет. Определение стиля в этом случае выглядело бы так:

input[type="text"]{
     
    border: 2px solid red;
}

После элемента в квадратных скобках идет атрибут и его значение. То есть в данном случае мы говорим, что для текстового поля надо установить границу красного цвета 2 пикселя толщиной сплошной линией.

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы атрибутов в CSS3</title>
        <style>
            input[type="text"]{
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <p><input type="text" id="login" /></p>
        <p><input type="password" id="password" /></p>
        <input type="submit" value="Send" />
    </body>
</html>
Читать далее

Вступите в группу, и вы сможете просматривать изображения в полном размере

		Это интересно 0	Как всё будет выглядеть в блоге: Селекторы атрибутов Кроме css селекторов элементов мы также можем использовать селекторы их атрибутов Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchimsya-rabotat-v-kompyuternyih-programmah/12863596/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Селекторы атрибутов </a> <div class="insert-intro" style="font-family:trebuchet MS;">Кроме css селекторов элементов мы также можем использовать селекторы их атрибутов </div> </div> Селекторы атрибутов <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchimsya-rabotat-v-kompyuternyih-programmah/12863596/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Селекторы атрибутов</a> <div style="font-family:trebuchet MS;">Кроме css селекторов элементов мы также можем использовать селекторы их атрибутов </div> </div>

webguru

16.11.2016

В избранное Пожаловаться Просмотров: 404

Комментарии ⁰

Учимся работать в компьютерных программах 1086

Последние откомментированные темы:

Селекторы атрибутов

Комментарии временно отключены

Открытая группа
54219 участников