将默认类应用于所有类型的* n *

Question

有没有办法默认将class应用于元素？比方说，我想将课程foo应用于所有input元素：

.foo { ... }

我有限的知识使我相信我需要每次都标记出来：

<input type='text' class='foo' />
<input type='password' class='foo' />
...

但是，显然我希望我可以默认将该类应用于CSS中的所有input元素。我期待着你的回答！

更新

为了澄清自己，我不想复制foo已存在的CSS，因为如果我需要更改{的样式，我不想在多个地方更改它{1}}。此外，我将其应用于所有foo个元素。

Answer 1

您可以使用jQuery等框架轻松地向元素添加类：

$(document).ready(function() {
    $('input').addClass('foo');
});

编辑：要解决您的最新更新...

如果你想只为某些条件“扩展”一个类，你可以为那个案例添加第二个类......例如：

<input class="foo bar" />

<style type="text/css">
    .foo.bar {
        color: #123;
    }
</style>

这只会应用同时包含.foo和.bar的元素，并且不会影响全局.foo样式，这些样式仍将应用于所有.foo个元素（包括这些）

Answer 2

如果您的意思是想要采用.foo规则中的所有样式并将其应用于input，请选择它们：

.foo, input { ... }

Answer 3

您可以使用javascript的document.getElementsByTagName(tag);功能。

示例：

var tags = document.getElementsByTagName("input");
for(i = 0;i<tags.length;i++){
    tags[i].className = "foo";
}

如果您想保留当前的课程，请确保if(tags[i].className != ""){tags[i].className = tags[i].className + " foo";}。它将延续当前的课程。

Answer 4

您可以尝试查看样式表预处理器，例如LESS或SASS。这些将允许您在此处使用变量和其他技巧来帮助您避免重复CSS。如果您希望在将其提供给用户之前对其进行处理，则可以使用这些以及服务器端的Javascript实现。

当然，CSS无论如何都会以重复的代码结束，但你不必自己写两次相同的东西。

例如，在LESS：

.foo {
   color: #222222;
   padding: 10px;
}

input {
   .foo;
}

Answer 5

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

这是应用css的代码