1

我正在使用 JQuery UI 创建一个模式窗口，该窗口会弹出并提示您在表单中输入一些信息。如果用户未输入所需信息，则文本字段将以红色突出显示并带有红色边框。

但是，因为我手动更改了字段的边框，所以 textarea 的边框仅变为红色。即使我的输入和文本字段具有相同的 CSS 规则，我的结果也存在差异。

输入字段错误：

在此处输入图像描述

文本区域错误：

在此处输入图像描述

CSS：

#emailField input, textarea
{
    padding: .7em;
    border-radius: 5px;
    border: 1px solid #999;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error{
    border: 1px solid #fb483d;
    background: #fef1ec url(/Content/themes/css/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
    color: #cd0a0a;
}

当我通过开发人员控制台查看 CSS 时，我会看到其中一个优先于另一个。但是为什么会有任何区别呢？

输入字段的 CSS：

在此处输入图像描述

文本区域的 CSS：

在此处输入图像描述

简而言之，我想在我的输入字段和我的文本区域周围都有一个红色边框，但我也想了解为什么似乎有选择性优先级。

4

2 回答 2

2

这是因为您在 CSS 中为输入指定了父级

#emailField input, textarea

所以你必须使.ui-..规则更具体

body #emailField .ui-..

或类似的东西。

有关此http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/的更多信息

于 2013-10-09T15:27:45.190 回答
2

逗号选择器不服从分配属性。

a b, c匹配a b和c; 它不等于a c.

因此，您的#emailField input选择器比.ui-state-error（因为它包括一个 ID 选择器）更具体，而textarea不太具体（因为它不包括一个 ID 选择器。

于 2013-10-09T15:28:14.397 回答