1

有没有办法class默认将 a 应用于元素？例如，假设我想将该类foo应用于所有input元素：

.foo { ... }

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

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

但是，显然我希望我能以某种方式默认将该类应用于inputCSS 中的所有元素。我期待着您的回答！

更新

为了澄清自己，我不想复制已经存在的 CSS，foo因为如果我需要更改foo. 此外，我将把它应用于不仅仅是所有input元素。

4

5 回答 5

2

您可以使用 jQuery 之类的框架轻松地将类添加到元素中：

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

编辑：为了解决您的最新更新...

如果您只想在某些条件下“扩展”一个类，您可以为这种情况添加第二个类......例如：

<input class="foo bar" />

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

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

于 2012-12-07T04:51:26.183 回答
2

如果您的意思是您想要获取.foo规则中的所有样式并将它们也应用到inputs，只需选择它们：

.foo, input { ... }
于 2012-12-07T04:54:16.783 回答
1

你可以使用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";}. 它将继承当前的课程。

于 2012-12-07T04:53:57.073 回答
1

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

当然，CSS 最终还是会出现重复的代码，但您不必自己编写相同的东西两次。

例如，在 LESS 中：

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

input {
   .foo;
}
于 2012-12-07T04:56:09.593 回答
0 
input[type=text]{
  color:#123;
}

这是应用 css 的代码

于 2012-12-07T04:51:27.330 回答