如何更好地組織我的CSS，使單獨的標籤不會獲得相同的樣式？

Question

這就是我的index.php應該如何look（codepen鏈接）

我想添加javascript功能到右邊的按鈕。但是，有一個樣式問題會弄亂按鈕。這是什麼happened。

正如您所看到的，登錄按鈕採用了頁腳標籤的樣式。

我對JavaScript沒有太多瞭解，並從我找到的教程中獲得了代碼。我寧願不改變JavaScript。我相信我可能需要更好地組織我的html或css。如果有人有任何提示，我會很感激。我已經堅持了兩天。

我能移動的按鈕的唯一方法是其樣式，在HTML按鈕

例如：

<a id="loginbutton" href="javascript:toggle();" style="top: 220px;">log in</a> 我不喜歡這樣的解決方案，因爲我將要做出的網頁響應。我需要能夠在樣式表中進行媒體查詢。

摘要：

1. 當我加入了javacript，造型頁腳標籤鏈接（標籤）打亂了我的按鈕造型。
2. 這需要在CSS文件中進行樣式設置，而不是HTML。

Answer 1

離開HTML和CSS在你的榜樣標題爲 '工作'。你不需要添加標籤來使JavaScript工作。您也可以使用onclick事件。只要改變你的按鈕代碼：

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

瞭解更多關於這裏的onclick事件http://www.w3schools.com/jsref/event_onclick.asp

Answer 2

您可以使用組合的CSS類或層次結構。

E.g.

聯合標籤：

.my-tag { 
    color: red; 
} 

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

層次：

.my-tag { 
    color: red; 
} 

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