Выборщики свойств CSS (Выборщики свойств)

Выборщики свойств устанавливают стиль для элементов HTML с заданным свойством. Это позволяет устанавливать стиль для элементов HTML с заданным свойством, а не только для свойств class и id.

Изучение выборщиков свойств

Выборщики свойств CSS предоставляют простой и мощный способ установки стиля для элементов HTML на основе конкретныхАтрибут или значение атрибутасуществие будет применяться стиль к элементам HTML.

Вы можете создать выборщик свойств, поместив атрибут (возможно, с значением) в парные квадратные скобки. Вы также можете поместить перед нимВыборщик типа элемента.

Следующие разделы описывают наиболее распространенные выборщики свойств.

Выборщик свойств CSS

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

[title]　{
　　　　color: blue;
}

Выборщик [title] В примере указанный селектор соответствует всем элементам с атрибутом title.

Вы также можете ограничить область выбора, поместив атрибутный селектор после селектора типа элемента, как показано ниже:

abbr[title] {
　　　　color: red;
}

Выборщик abbr[title] соответствует толькоЭлементы с атрибутом title, поэтому они соответствуют аббревиатурам, но не соответствуют элементам с атрибутомЯкорьЭлемент title.

Выборщик CSS [attribute="value"]

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

input[type="submit"]　{
　　　　border: 1px solid green;
}

Выборщик, указанный в примере, соответствует элементам input Все элементы с атрибутом type, значение которого равно submit.

Выборщик CSS [attribute〜="value"]

Вы можете использовать оператор ~= для того, чтобы атрибутный селектор соответствовал атрибуту, значение которого содержит указанное значение.Разделенный пробеломЛюбому элементу списка значений соответствует, одному из которых равно указанному значению:

[class~="warning"] {
　　　　color:　#fff;
　　　　background:　red;
}

Этот селектор соответствует любому HTML-элементу с атрибутом class, который содержит значения, разделенные пробелом, одним из которых является warning. Например, элемент с классом, соответствующим warning, alert warning и т.д.

Выборщик CSS [attribute |="value"]

Вы можете использовать оператор |= для того, чтобы атрибутный селектор соответствовал атрибуту, значение которого начинается с указанного значения.Разделенный дефисомЛюбому элементу списка значений соответствует:

[lang|=en] {
　　　　color:　#fff;
　　　　background: blue;
}

Выборщик, указанный в примере, соответствует элементам сlangВсе элементы атрибута, который содержит значение, начинающееся с en, независимо от того, содержит ли это значение знако «-» и другие символы. Иначе говоря, его элементы соответствуют элементам с атрибутом lang с значениями en, en-US, en-GB и т.д., но не соответствуют US-en, GB-en.

Выборщик CSS [attribute ^="value"]

Вы можете использовать оператор ^= для того, чтобы атрибутный селектор соответствовал атрибуту с начальной частью значениясуказанным значениемНачинающийся сЛюбой элемент, соответствующий условиям. Это не обязательно должен быть полный термин.

a[href^="http://"] {
　　　　background: url("external.png") 100% 50% no-repeat;
　　　　padding-right: 15px;
}

Выборщик, указанный в примере, определяет все внешние ссылки и добавляет маленькую иконку, указывающую, что они откроются в новом вкладке или окне.

Выборщик CSS [attribute $="value"]

Таким же образом, можно использовать оператор $= для выбора атрибутов по значениюсуказанным значениемзаканчивающиесяВсе элементы. Это не должно быть полным словом.

a[href$=".pdf"]　{
　　　　background:　url("pdf.png")　0　50%　no-repeat;
　　　　padding-left:　20px;
}

Этот селектор в примере выбираетЭлементы, которые связаны с документом PDF, и добавлен маленький значок PDF, чтобы предоставить пользователям информацию о ссылке.

Выборщик CSS [attribute *="value"]

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

[class*="warning"]　{
　　　　color:　#fff;
　　　　background:　red;
}

Этот селектор в примере соответствует всем HTML-элементам с атрибутом classvalue, содержащим это свойство warning. Например, это элемент соответствует элементам с классом warning, alert warning, alert-warning или alert_warning и т.д.

Использование выборщика свойств для стилизации форм

Выборщик свойств для безclassили стили особенно полезныid：

input[type="text"],　input[type="password"]　{
　　　　width:　150px;
　　　　display:　block;
　　　　margin-bottom:　10px;
　　　　background:　yellow;
}
input[type="submit"]　{
　　　　padding:　2px　10px;
　　　　border:　1px　solid　#804040;
　　　　background:　#ff8040;
}