如何使用数据选择为项目添加颜色

Question

当用户单击 select 选项时，data-selected 属性将添加到 .item。我如何设计 .item DIV 的这种状态并为其指定边框颜色。

我已经试过了，但似乎不起作用

div[data-selected=".item"]{ border-color: #333; }

Answer 1

像这样添加样式

div.item[data-selected] {
  border: 2px solid #333;
}

div.item[data-selected] {
  border: 2px solid #333;
}

<div class="item" data-selected="">
  ABC
</div>

Answer 2

您可以使用以下选择器设置样式

div.item[data-selected] {
  border: 1px solid rgba(0,0,0, 0.5);
}

这是一个fiddle

Answer 3

更具体地说，如果您想 select 使用属性值，您可以像下面的代码片段那样做

这种select离子被称为Attribute Selector

div.item[data-selected="value"] {
  border: 1px solid #000;
}

<div class="item" data-selected="value">
  Having Border
</div>
<div class="item">
  Not Having Border
</div>

How to add color to an item using data-selected