Выбор элементов по атрибуту данных в CSS
Логические ресурсы позволяют вам определять объекты в XAML, которые не являются частью визуального дерева, но могут использоваться в вашем пользовательском интерфейсе. Одним из примеров логического ресурса является Brush, который используется для обеспечения цветовой схемы. Как правило, эти объекты определяются как ресурсы, которые используются несколькими элементами приложений.
Теперь выше объявленный ресурс может использоваться как статический или динамический ресурс. Следует помнить, что при использовании статических ресурсов он должен быть сначала определен в коде XAML, прежде чем его можно будет отнести. Статические и динамические ресурсы могут использоваться как:
или:
Разница между StaticResource и DynamicResource заключается в том, как ресурсы извлекаются элементами ссылки. StaticResource извлекаются только один раз ссылочным элементом и используются на протяжении всего ресурса ресурса. С другой стороны, DynamicResource приобретаются каждый раз, когда используется ссылочный объект.
Помещая его более простым способом, если свойство цвета RadialGradientBrush изменяется в коде на Orange и Pink, тогда оно будет отражать элементы только когда ресурс используется как DynamicResource. Ниже приведен код для изменения ресурса в коде:
RadialGradientBrush radialGradientBrush =
new RadialGradientBrush(Colors.Orange, Colors.Pink);
this.Resources["myGradientBrush"] = radialGradientBrush;
Недостатком DynamicResource является то, что он снижает производительность приложения, поскольку ресурсы извлекаются каждый раз, когда они используются. Лучшая практика заключается в использовании StaticResource, пока не будет определенной причины использовать DynamicResource.
Источник: WPF: StaticResource vs. DynamicResource
1 ответ
селекторы атрибута CSS с маленьким отрывком и рабочими примерами
1 - [приписывают ~ = "значение"]
2 - [attribute^ = "значение"]
3 - [attribute$ = "значение"]
4 - [атрибут | = "значение"]
5 - [атрибут* = "значение"]
/* Seven (because it search in all words)*/
div[class="items"] {
color: red;
}<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>, ~ используется для выбора элементов со значением атрибута, содержащим указанный Word
/* Five Six Seven (because it search in all words)*/
div[class~="items"] {
color: red;
}<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>^, используется для выбора элементов, значение атрибута которых начинается с заданного значения.
/* One Three Five Seven (because it search in beginning)*/
div[class^="items"] {
color: red;
}<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>селектор $ используется для выбора элементов, значение атрибута которых заканчивается заданным значением.
/* Two Four Six Seven (Because it search from end) */
div[class$="items"] {
color: red;
}<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>| используется для выбора элементов с указанным атрибутом, запускающимся с заданного значения.
/* One Seven (because it start from beggining and search -(hyphen)). ignore started from end */
div[class|="items"] {
color: red;
}<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>* используется для выбора элементов, значение атрибута которых содержит заданное значение.
/* One Two Three Four Five Six (because it search all group)*/
div[class*="group"] {
color: red;
}<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>