Question

我在ASP.Net MVC3应用程序中使用不显眼的验证。我想以某种方式设置与所需元素相关联的标签元素。

我的担心不是调整所需字段周围的视觉指示器，而是根据此元素的属性修改不同元素的外观。< / p>

现在，我相信通过使用CSS规则可以使用CSS来设置元素本身的样式，该规则的选择器应用于具有[data-val-required]属性的所有元素。它看起来像这样：

input[data-val-required] { color: red; }

但是可以设计标签样式吗？要说（使用CSS选择器）CSS规则适用于所有标签元素，其for属性指向具有input属性的[data-val-required]元素？

我目前正在使用一些jQuery的样式，它运行得很好。但如果我能够设置一个CSS规则并完成它，它会更好。

Answer 1

这个jsfiddle example is using CSS3 selectors，但是标签必须在HTML中的输入元素之后跟随（例如，在使用附加CSS之前放置），这是一个缺点。

更简单有效的是给出label元素类属性，如：

<label class="required">

或将标签输入对放在div元素中：

<div class="required">
  <label for="input1">Label 1</label>
  <input id="input1" ... />
</div>

并通过简单地使用：

来应用所需的CSS样式

.required label {
    ...
}

Answer 2

你不能从这里到达那里。正如@vlgalik所说，唯一的CSS选项是1）某些浏览器不支持的选择器，2）查找其他元素的能力有限，迫使您构建标记以符合要求。

因此，您当前的解决方案 - 使用JQuery查找标签及其相应的输入 - 是您最好的选择。

但是，我会以相反的方向处理您的jQuery解决方案：首先查找匹配input[data-val-required]的所有输入，然后为每个输入获取其ID，然后选择相应的标签：label[for="<id-from-input>"] - 这似乎会减少工作量。但这是一个优化;如果你在页面上没有很多标签和输入，那么任何一个方向都可以正常工作。

Answer 3

您提供的示例应该非常接近您需要做的事情。试试这个：

input[for=data-val-required]{}

此选择器基于给定标记的属性。这应该会给你你想要的东西。

使用CSS设置指向具有特定属性的元素的标签的样式

3 个答案: