Допустим, что вам надо определить для полей ввода текста следующий вид: Поля ввода текста Задача легко решается с помощью следующих правил: 01 input { 02 border: 5px solid white; 03 -webkit-box-shadow: 04 inset 0 0 8px rgba(0,0,0,0.1), 05 0 0 16px rgba(0,0,0,0.1); 06 -moz-box-shadow: 07 inset 0 0 8px rgba(0,0,0,0.1), 08 0 0 16px rgba(0,0,0,0.1); 09 box-shadow: 10 inset 0 0 8px rgba(0,0,0,0.1), 11 0 0 16px rgba(0,0,0,0.1); 12 padding: 15px; 13 background: rgba(255,255,255,0.5); 14 margin: 0 0 10px 0; 15 } Но если добавить несколько других элементов ввода, например, выбор файла и кнопку отправки запроса, то внешний вид станет удручающим, потому что стили будут применяться и к этим элементам ввода. Вставляем дополнительные элементы ввода Задача решается легко. Зададим ограничение для использования стилей только на полях ввода текста! 1 input[type=text] { 2 /* Прелестные стили */ 3 } Но дальнейшее развитие событий приводит вас к решению использовать новые типы HTML5 для элементов ввода. Такие элементы удобнее, лучше поддерживают мобильные приложения, повышают удобство использования вашего проекта. Это type=email, type=url, type=tel, type=number, type=color, и много других типов! Они приводят к появлению громоздкого кода... 1 input[type=text], 2 input[type=url], 3 input[type=tel], 4 input[type=number], 5 input[type=color], 6 input[type=email], { 7 /* И это еще не все типы перечислены... */ 8 } Что же делать? Использовать CSS3 и селектор :not(). То есть, вместо включения всех новых типов, мы исключим те, которые не нуждаются в использовании задаваемых стилей: 1 input:not([type=submit]):not([type=file]) { 2 /* так будет намного лучше */ 3 } 4 5 <img title="Исключаем типы элемента ввода" src="lessons/les973/img_3.png" alt="Исключаем типы элемента ввода" width="380" height="283"> Теперь наша форма ввода выглядит подобающим образом. Но есть одна задачка. IE не поддерживает селектор :not() в версиях меньше 9, которые используются еще очень многими посетителями сайтов. Да, это засада. Однако для нее тоже есть обходной маневр - использовать IE.js: 1 <!--[if lt IE 9]> 2 <script src="lessons/les973/http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> 3 <![endif]--> Конечно, можно обойтись и без таких хитрых ходов. Но тогда придется перечислять все атрибуты типов в селекторе, как в выше приведенном примере, или добавлять имя класса в каждый элемент ввода, как в старые добрые времена.