如何正確使用CSS Class和ID

剛剛過了一些初學者的建議請就如何正確安排一些CSS。如何正確使用CSS Class和ID

我有一個基本的3頁網站。每個頁面都將在底部顯示頁腳。頁腳將保持每個頁面上的主要樣式相同（如寬度，高度等），但是我想根據所處的頁面（背景顏色，字體顏色）更改其他樣式。我知道這是可以做到的，但是我正在尋找一些關於使用正確語法的提示，所以不要使用壞習慣學習，除非當然這已經是正確的了。

什麼我在CSS是：

.footer 
{ 
    width: 100%; 
    height: 100px; 
    border: 1px solid black; 
    text-align: center; 
} 

#footer_page1 
{ 
    background-color: red; 
    font-color: white; 
} 

#footer_page2 
{ 
    background-color: blue; 
    font-color: white; 
} 

#footer_page3 
{ 
    background-color: white; 
    font-color: black; 
}

...並調用它的HTML我有：

<div class="footer" ID="footer_page1"> 
    Some text here 
</div>

這是正確的，還是應該這樣做更好辦法？

非常感謝。

來源

2013-02-13 Harry

'id'屬性是錯誤的。在HTML文件中，你有'page1'，但在CSS中是'footer_page1'，所以將'page1'改爲'footer_page1' – rsz 2013-02-13 22:46:56

投票結束爲「不建設性」，因爲每個人都會對他們自己的偏好有不同的看法'最佳實踐'。 – Sparky 2013-02-13 22:50:22

道歉，沒有意識到會有幾種方式被認爲是「最佳做法」，因此，蠕蟲能打開 - 無論哪種方式，如果像我這樣的初學者閱讀下面的一些評論，有一些非常有用和簡潔的解釋來幫助我們。感謝所有人的評論。 – Harry 2013-02-13 23:01:02

當你引用一個ID或類CSS，你必須使用你選擇的類或ID的全名。例如，當您想要引用div元素時，您必須在樣式表中編寫#someid {以通過id引用此div。

無論如何，你正在考慮它，但你的語法是有點關閉。以下是你可能會尋找：

/* common footer code goes here */ 
.footer 
{ 
    width: 100%; 
    height: 100px; 
    border: 1px solid black; 
    text-align: center; 
} 

/* code specific for each page goes here */ 
#page1.footer 
{ 
    background-color: red; 
    font-color: white; 
} 

#page2.footer 
{ 
    background-color: blue; 
    font-color: white; 
} 

#page3.footer 
{ 
    background-color: white; 
    font-color: black; 
}

使用在同一條線上兩個選擇被稱爲selector chaining。在這種情況下，你想鏈接一個id選擇器和一個類選擇器。

編輯： Here is a jsfiddle。

看你的代碼，明顯的「壞習慣」，人們可以找到的是，IDS page1，page2和page3都在頁腳的網頁，這是一個比較混亂的div，爲「頁」沒有按」 t完全唯一地定義頁腳。確保您只在任何頁面上使用同一個名稱的ID，如果您確實使用了ID，則應該唯一地描述該元素。

正如其他人所說，應該指出的是，最近避免使用id（JavaScript功能除外）已成爲良好的做法。如果可能，只使用類是現在的標準。知道如何執行選擇器鏈接是很好的，當然，正確的語法總是很重要。

來源

2013-02-13 22:53:38 Joey

你應該使用ID #footer和類.page1, .page2, .page3等 - 這是一個更好的嘗試，因爲你仍然有相同的頁腳（所以ID應該是相同的），你只是想改變一些東西（可以使用不同的類）

編輯：和我一個快速提示：因爲邊界不是在項目的寬度計算，除非你設置要小心設置width: 100%和border: 1px solid black的box-sizing: border-box財產

這是什麼意思是，如果你有一個1024像素的寬屏幕，你有預先的CSS腳註感覺會是1026px寬，2px在右側裁剪

來源

2013-02-13 22:46:26 pwolaq

並且使用HTML5'

'元素將會很好。 – dsundy 2013-02-13 22:51:03

在CSS中使用ID是不可取的，儘管它有時可能很有用。事實上，我會建議不要使用除類和僞類之外的任何東西，偶爾也會使用選擇器（儘管我個人主要使用ID和元素選擇器大多是懶惰的）。這樣做的原因是，你只需要在級聯中的一個級別上工作，這樣可以在樣式表中簡化很多事情，特別是如果它們變得非常大。

.footer { /* default styles */ } 
.page1 { /* this is already after the .footer ruleset, so it overrides 
    the earlier rules automatically (by the nature of CSS */ } 
.page2 { /* and so on */ } 

<div class="footer page1"> 
    Some text here 
</div>

您也可以將該類添加到整個頁面的容器中，這可能更有意義。這樣，你可以操縱的頁眉和頁腳同時規則集：

.footer {} 
.header {} 
.page1 .footer {} 
.page1 .header {}

來源

2013-02-13 22:50:54

您需要通過.footer#page1選擇<div class="footer" ID="page1">。我會建議使用頁面＃的類，因爲ID應該是唯一的一個頁面，但ID =「page1」可能會頻繁使用。

最後的結果可能是

.footer 
{ 
    width: 100%; 
    height: 100px; 
    border: 1px solid black; 
    text-align: center; 
} 

.footer.page1 
{ 
    background-color: red; 
    font-color: white; 
} 

.footer.page2 
{ 
    background-color: blue; 
    font-color: white; 
} 

.footer.page3 
{ 
    background-color: white; 
    font-color: black; 
}

與

<div class="footer page1"> 
    Some text here 
</div>

來源

2013-02-13 22:51:51 Minime

如何正確使用CSS Class和ID

回答

相關問題