Question

我正在使用jsonform（https://github.com/joshfire/jsonform）以便从json架构生成表单，而jsonform需要自己的css表单，但我正在使用另一个css作为我站点的模板。有没有办法只在特定标签上应用css？例如只有内部的html？

我正在使用rails，因此头部不会在页面之间发生变化。

感谢。

Answer 1

是的，当然，那就是CSS的全部内容。如果向包含表单的包含元素添加ID或类，则可以将该ID或类添加到JSONform css中的所有CSS选择器。

例如：

<div class="jsonform">
    {json form goes here}
</div>

然后在你的jsonform css中，将'.jsonform'添加到所有必需的选择器中：

.jsonform input.text {border:none...}
.jsonform input.submit {background-color:...}

我看了jsonform css。我很惊讶它只使用完整的Twitter引导程序CSS，那里有相当多的样式，肯定会覆盖你自己的CSS。我会尝试删除表单不直接需要的任何内容，例如body，img，p和h1声明。

如果没有额外的造型，表格可能会很好;然后，您可以将自己的CSS应用于表单元素...

Answer 2

如果你正在使用CSS预处理器（即SASS，LESS，SCSS等），那么在一个class / id / tag下缩进你的自定义css可能是一件容易的事。您可以查看此问题：apply CSS style to particular elements dynamically。

Answer 3

试试这个＆gt;＆gt;＆gt;

 <link rel="stylesheet" type="text/css" href="theme1.css">
 <link rel="stylesheet" type="text/css" href="theme2.css">

在主题1中，您将链接到某些类，在theme2中，您将链接到其他类。如果您需要更多帮助或者这不是理想的话，请回复评论

例如html

 <div id="test"  class="testing"></div>

css将是

 #test{color:red;}/*for ids*/
 .testing{color:red}/*for classes*/

大括号中的样式可以更改为您想要的样式，如果使用link rel =

将页面链接到任何外部CSS，则类和ID可以在任何外部CSS中

Answer 4

是的，你可以。如果您只想定位该页面，或者为您需要的元素提供ID或类，则需要为HTML文档的正文提供ID。

<!-- HTML -->
<div class="your-class">

您的内容

In the CSS:

.your-class {
your: style;
}

或

<!-- HTML -->

<body id="your-id-name">
<div class="generic-class">

您的内容

/* using CSS */

body#your-id-name { 
your: style; 
}

body#your-id-name .generic-class {

你的：风格; }

希望它有所帮助; - ）

Answer 5

jsonform附带的CSS是Bootstrap，但/deps目录中的README.md表明该文件的使用是可选的。只要您不在HTML中包含bootstrap.css，就可以设置表单控件的样式，但是您希望/避免使用Bootstrap覆盖您自己的样式。

如果你想继续使用Bootstrap for jsonform，你可以尝试使用LESS或SASS“命名”Bootstrap样式。看看“How to namespace Twitter Bootstrap so styles don't conflict”的前两个答案，了解如何用LESS做到这一点。