为输入类型定义 CSS 异常答案

【问题标题】：defining CSS exception for input type为输入类型定义 CSS 异常
【发布时间】：2011-08-22 18:04:54
【问题描述】：

我在 css 文件上创建了输入类型样式，通过它，我正在更改输入类型文本框的样式，并且我在整个网页中都使用了该样式。但是，现在我遇到了一个问题，我希望特定的输入类型不应该受到我创建的 css 文件的影响。简而言之，对于特定的输入类型，我想要 css 异常。所以......输入样式保持不变，不受css样式的影响。任何想法，如何实现这一点。想法将不胜感激！！！

这是我的css文件的代码

input
{
color:#000000;
font-size:14px;
border:#666666 solid 2px;
height:24px;
margin-bottom:10px;
width:200px;


}
textarea
{
color:#000000;
font-size:14px;
border:#666666 solid 2px;
height:124px;
margin-bottom:10px;
    width:200px;

}

我想要那个，它不应该应用在这个上

<input type="image" src="images/loginbutton.png" style="width:80px;height:40px" />

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

以下选择器将帮助您在 CSS3 中排除 image 类型：

input:not([type="image"])

如果您不想依赖 CSS3 - 由于浏览器兼容性，您可能不会 - 您应该将初始选择器更改为更具体，如下所示：

input[type="text"], input[type="password"]

编辑：似乎需要更深入的解释

这会起作用的原因是因为它不会专门排除任何输入类型，但您将只包括您确实想要定位的类型。

因此，与其说我有 a、b 和 c，而且我想排除 b。你可以说我只想定位 a 和 c。

【讨论】：

您想用input 选择器定位哪些输入？只需列出所有类型并将您的选择器更改为该类型（如我的回答中所示）。

【解决方案2】：

如果您不关心 IE 8 及更低版本，you can use :not()。否则，您将需要覆盖您为图像输入应用的所有样式，或者找到其他方法使选择器更加具体（例如为每个输入添加一个类）。

【讨论】：

【解决方案3】：

这可能太明显了，无法建议，但是您可以在 textarea 上放置一个您不希望应用该样式的 id 吗？然后给这个元素它自己的风格？

否则，您可以尝试使用一组更具体的后代选择器来定位该特定元素。

【讨论】：

【解决方案4】：

您可以将您不想要的输入设置为 class="nostyle"，然后在 CSS 中定义...

.nostyle {
    margin: 0;
    border: 0;
    }

... 或任何您想要的非样式输入。

【讨论】：

input[type="image"] 不是 img。

【解决方案5】：

有很多方法可以按照您的要求进行，但我建议您不要这样做。我建议让您的所有样式元素（包括输入等在 CSS 中具有实际的类，而不仅仅是输入。这样您可以轻松地使项目没有类或具有不同的类。

我知道这并不能回答您的问题，但希望这会对您有所帮助，如果您确实更改它，尽管编写更多 CSS 很麻烦，但从长远来看，它会更好，可能是这样的：

input.normal {
    color:#000000;
    font-size:14px;
    border:#666666 solid 2px;
    height:24px;
    margin-bottom:10px;
    width:200px;
}


input.alternate {
   something:here;
}

【讨论】：