Question

让我说我有这样的CSS：

div.form label input {
      /* some css here */
}

但是，这适用于我的所有input元素。我想要另一个适用于输入类型的CSS，那么我该怎么做呢？创建一个类在这里不起作用，因为它会因为第一个而被忽略。

使用案例

我有5个文本输入，我想用 x 方式设置样式，我有3个文本输入，我想用 y 方式设置。

Answer 1

使用IE7 +支持的attribute selector和其他所有现代浏览器..

如果你想要，比如文字输入，请使用：

input[type="text"] {
    color: red; /* Or whatever */
}

类型password的输入将是这样的，例如：

input[type="password"] {
    color: blue; /* Or whatever */
}

等等。它不经常使用，但应该使用其他属性甚至自定义属性。 This quirksmode page提供了很好的例子。

这是我自己的一个：

<div foo="bar"></div>

/* Any `div` element with `foo` having any value */
div[foo]
{
    background: red;
}

/* Any `div` element with `foo` having a specific value (bar) */
div[foo="bar"]
{
    background: green;
}

如果我们将此应用于text输入，您可以使用他们的name属性：

<input type="text" name="username">
<input type="text" name="email">

input[name="username"]
{
    background: blue;
}

input[name="email"]
{
    background: green;
}

Answer 2

设置输入控件样式尝试：

input[type='text'], input[type='password'], input[type='radio'], input[type='checkbox'],input[type='submit'], textarea, select {
    background-color: #333333;
    color: #FFFFFF;
}

然后，您可以采用不同的方式设置不同的输入控件。

编辑：

.red
{
color:red;
}

.blue
{
color:blue;
}

标记：

<asp:TextBox runat="server" id=2txt1" class="red"/>
<asp:TextBox runat="server" id=2txt1" class="blue"/>

Answer 3

您可以使用属性选择器执行此操作：

input[type="text"]
{
    color: #f00;
}

这将选择所有带有文本类型的输入，无论id或class如何。 IE7和IE8仅在指定了！DOCTYPE并且在IE6或更低版本中不受支持时才支持属性选择器。

Answer 4

我的第一个问题是你将输入包装在标签的标签中吗？我想这更像是一种偏好。我通常会将这些分开，例如：

<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" />

其次，更多的是个人偏好，我会给我的表格一个id：

<form id="contactform">

所以，在我的胸前，我同意上述答案，但可能会根据设计做一些。我将使用上面提到的属性选择器设置一些全局样式，然后如果我需要使用id，或者使用带有类的包装div，则在页面上设置输入样式。

所有好的选择。我想我希望问题中的CSS真的只是一些随意的例子，因为对我来说css没有多大意义。

CSS样式相同类型的元素不同

4 个答案: