如何更好地组织我的CSS,以便单独的标签不能获得相同的样式?

时间:2017-02-04 18:20:29

标签: javascript css styling

这就是我的index.php应该look(codepen link)

的方式

我正在尝试将javascript函数添加到右侧的按钮中。但是,有一个样式问题会使按钮混乱。这就是happened

正如您所看到的,登录按钮已经为页脚的标签设置了样式。

我对javascript了解不多,并从我找到的教程中获取了代码。我宁愿不改变javascript。我确信我可能需要更好地组织我的html或css。如果有人有任何提示,我会非常感激。我被困在这两天了。

我能够移动按钮的唯一方法是在html按钮中设置样式

前:

<a id="loginbutton" href="javascript:toggle();" style="top: 220px;">log in</a> 我不喜欢这个解决方案,因为我想要让网页响应。我需要能够在样式表中进行媒体查询。

摘要:

  1. 当我添加javacript时,页脚标记链接(标记)的样式会弄乱我的按钮样式。
  2. 这需要在css文件中设置样式,而不是html。

2 个答案:

答案 0 :(得分:0)

您可以使用组合css类或层次结构。

E.g。

合并代码:

.my-tag {
    color: red;
}

.my-tag.footer {
    color: blue;
}

<强>层次:

.my-tag {
    color: red;
}

.footer .my-tag {
    color: blue;
}

答案 1 :(得分:0)

保留html和css,如标题为&#39; working&#39;的示例中所示。您不需要添加标记以使javascript正常工作。您还可以使用onclick事件。只需将按钮代码更改为:

<button class="login" onclick="javascript:toggle();">log in </button>

在此处详细了解onclick事件http://www.w3schools.com/jsref/event_onclick.asp