CSS類和ID的

可能重複：
Use HTML tag names, classes or IDs in CSS?CSS類和ID的

在CSS中，有什麼用class和id的主要區別是什麼？爲什麼要使用類xyz以及爲什麼使用ID爲abc？我知道這裏有類似的問題，但沒有人真正回答。

我知道使用具有相同屬性和id的獨特屬性或獨特元素的多個元素的類，但爲什麼？僅僅使用類就不是一種可接受的做法，這樣您就不會在類和ID之間切換。在速度和優化，SEO等方面有什麼不同？

來源

2011-09-27 Nathan

你確定你有沒有發現這樣的問題？順便說一下，「速度和優化方面的差異，SEO」是不值得考慮的。 – BoltClock

請嘗試這篇文章[ID和類之間的區別| CSS的技巧]（http://css-tricks.com/818-the-difference-between-id-and-class/） – MikeM

螺栓，如果我說我沒有找到任何回答我的問題，那麼這正是我意思。 – Nathan

僅僅使用類是不是一種可以接受的做法，這樣您就不會混淆在類和ID之間切換？

是的，但假設您有20個盒子的1個類，其中有20個CSS屬性設置，並且您希望1個div具有不同的邊框顏色，所以最好僅將該ID賦予該div創建一個全新的班級。（如果你明白我的意思）

只需添加

#specialdiv{ 
    border-color: #000; 
}

，而不是用相同的19個屬性和1是不同的創建一個全新的類。當然你並不強迫爲此使用一個id，你也可以爲這個div分配另一個額外的類。（如<div class="box special">）

速度和優化，seo等方面有什麼不同？這有一個簡單的答案，如果你優化你的CSS，它會導致較低的文件大小，從而導致更快的加載時間，這將提高你的排名。（是的網站速度/加載時間確實問題很多）

來源

2011-09-27 11:20:16 Kenny

輝煌的答案，謝謝！ – Nathan

首先，你可以使用任何對你有意義的，但如果你的語義標記，內容與表現良好分離的粉絲，這可能會幫助您：

使用的類標識符/組相似事情，類似於OOP中的類。例如如果您有產品清單，並且每個清單元素都包含恰好有1個產品的數據，則可以將所有清單元素都歸類爲.product。

相反，如果產品清單是這個網站上唯一的產品列表中，你可以給整個列表中的ID #products，或者如果您需要更具體#available_products，無論是有道理的語義

來源

2011-09-27 11:18:31

這不是該ID的應該適用於獨特的元素;這是他們必須。這意味着您可以使用它們來識別頁面上的特定元素，與其他任何類似元素不同。除了對許多不同的JavaScript應用程序是必不可少的，一個id允許你調整你的類爲特定的實例。

當然，如果你從不需要做任何上述事情，堅持類。

來源

2011-09-27 11:18:55 dnagirl

「這不是說id應該適用於獨特的元素，而是它們必須*」他們只能*必須對於每個頁面的HTML，而不是CSS。當然，我在這裏只是很迂腐... – BoltClock

在一個HTML頁面你給ID一個元素，給它的身份應該是唯一的，所以你可以參考這個元素只是由它的ID調用它。

至於類，你可以給給類多個元素在HTML文件中。這就像你做一組共享例如在一個班的學生所有學生都有一些共同的特性，但仍然有，我們可以通過自己的卷沒有說是所有類中的唯一參考一些獨特的特性相同的特性元素。

例如，在一個班的學生所有我們在課堂上指定的共同屬性。

.class_students { 
     grade:6; 
     instructor:Ms XYZ; 
    }

而對對於不同的學生在班級獨特的，我們會用自己的卷沒有它是獨一無二的，就像

#roll_no6 { 
     name: Micheal; 
     age:10; 
    }

類似的一些內容可以採取多個類，像<div class="rounded blue">性質。這意味着這些元素屬於多個組，如果我們學校的例子是屬於某個特定班級的學生，也可能屬於某個運動隊，那麼它將共享這兩個組的屬性。

現在最後一個例子來證明每一件事情。

<student id="rollno6" class="grade6 hockey-team"> 
    </student>

CSS

.grade6 { 
     instructor:Ms XYZ; 
     no-students:30; 
     major:Math; 
    } 
    .hockey-team { 
     kit-color: blue; 
     trainer: Mr ABC; 
    } 
    #rollno6 { 
     name:Micheal; 
     lives: somewhere; 
     position:center-forward; 
     major:Physics; 
    }

給予一定的財產，你認爲應該只在rollno6應用，你可以把它給那個和類的元素的其餘部分將保持不變。在grade6的主要財產告訴我們，該班的所有學生都在數學專業。但是你在物理學專業學生rollno6，現在的rollno6專業學生超過該屬性。

來源

2011-09-27 11:25:32 Ehtesham

CSS類和ID的

回答

相關問題