it-swarm-vi.tech

lớp div vs id

Khi sử dụng div khi nào là tốt nhất để sử dụng một lớp so với id?

Là tốt nhất để sử dụng lớp, nói biến thể phông chữ hoặc các yếu tố trong html? Sau đó sử dụng id cho cấu trúc/container?

Đây là điều mà tôi luôn không chắc chắn một chút, bất kỳ trợ giúp nào cũng sẽ rất tuyệt.

49
Paul

Sử dụng id để xác định các thành phần sẽ chỉ có một phiên bản duy nhất trên một trang. Ví dụ: nếu bạn có một thanh điều hướng duy nhất mà bạn đang đặt ở một vị trí cụ thể, hãy sử dụng id="navigation".

Sử dụng class để nhóm các thành phần mà tất cả đều hành xử theo một cách nhất định. Ví dụ: nếu bạn muốn tên công ty của bạn xuất hiện in đậm trong văn bản cơ thể, bạn có thể sử dụng <span class='company'>.

83
Jim

Điều quan trọng nhất cần hiểu là ID phải là duy nhất: chỉ tồn tại một yếu tố với một ID nhất định trong một trang. Do đó, nếu bạn muốn tham khảo một yếu tố trang cụ thể, đó thường là thứ tốt nhất để sử dụng.

Nếu bạn có nhiều phần tử giống nhau, bạn nên sử dụng lớp phần tử để xác định chúng.

Một thực tế rất hữu ích, đáng ngạc nhiên ít được biết đến là bạn thực sự có thể áp dụng nhiều lớp cho một phần tử bằng cách đặt khoảng trắng giữa các tên lớp. Do đó, nếu bạn đã đăng một câu hỏi được viết bởi người dùng hiện đang đăng nhập, bạn có thể xác định nó bằng <div class = "question currentAuthor">.

51
Sean McMains

Hãy nghĩ về Đại học.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Học sinh ID thẻ là khác biệt. Không có hai sinh viên trong trường sẽ có cùng một sinh viên ID thẻ. Tuy nhiên, nhiều sinh viên có thể và sẽ chia sẻ ít nhất một Lớp với nhau.

Không thể đặt nhiều sinh viên dưới một Lớp tiêu đề, Sinh học 101. Nhưng không bao giờ chấp nhận đặt nhiều sinh viên dưới một sinh viên ID .

Khi đưa Nội quy qua hệ thống liên lạc nội bộ của trường, bạn có thể cung cấp Quy tắc cho một Lớp:

"Lớp Sinh học có vui lòng mặc áo đỏ vào ngày mai không?"

.BiologyClass {
  shirt-color:red;
}

Hoặc bạn có thể đưa ra các quy tắc cho một Học sinh cụ thể, bằng cách gọi id duy nhất của anh ấy ID :

"Jonathan Sampson vui lòng mặc áo xanh vào ngày mai chứ?"

#JonathanSampson {
  shirt-color:green;
}
33
Sampson

ID phải là duy nhất nhưng trong CSS, chúng cũng được ưu tiên khi tìm ra hướng dẫn nào trong hai hướng dẫn xung đột.

<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}

Các văn bản sẽ có màu trắng.

24
Oli

Một lợi ích bổ sung cho việc sử dụng ID là khả năng nhắm mục tiêu trong thẻ neo:

<h2 id="CurrentSale">Product I'm selling</h2>

Sẽ cho phép bạn ở một số nơi khác liên kết trực tiếp đến vị trí đó trên trang:

<a href="#CurrentSale">the Current Sale</a>

Một cách sử dụng phổ biến cho việc này là cung cấp cho mỗi tiêu đề trên blog một ID được đánh dấu dữ liệu (giả sử id = "date20080408") cho phép bạn nhắm mục tiêu cụ thể vào phần đó của trang blog.

Điều quan trọng cần nhớ là có nhiều quy tắc đặt tên hạn chế hơn đối với id, chủ yếu là chúng không thể bắt đầu bằng số. Xem tương tự SO câu hỏi: Giá trị hợp lệ cho các thuộc tính id trong html là gì?

6
Dave Rutledge

các lớp rất tuyệt khi bạn muốn áp dụng các kiểu tương tự cho nhiều div hoặc phần tử khác nhau. id là tốt khi bạn muốn giải quyết một yếu tố cụ thể để định dạng hoặc để cập nhật với javascript.

6
Mike Farmer

Một số điều khác cần ghi nhớ:

  • Khi sử dụng ASP.Net, bạn không có quyền kiểm soát hoàn toàn đối với ID của các phần tử, do đó bạn phải sử dụng lớp khá nhiều (lưu ý rằng điều này không đúng so với trước đây).
  • Tốt nhất nên sử dụng không, khi bạn có thể giúp nó. Thay vào đó, chỉ định loại phần tử và đó là loại của cha mẹ. Ví dụ, một danh sách không có thứ tự có trong div với lớp Navarea có thể được chọn ra theo cách này:

    div.NavArea ul { /* styles go here */ }
    

Bây giờ bạn có thể định kiểu phân chia logic cho phần lớn toàn bộ vùng điều hướng của bạn với một ứng dụng lớp.

3
Joel Coehoorn

Tiêu chuẩn HTML tự trả lời câu hỏi của bạn:

Không có hai đối tượng có thể có cùng một ID, nhưng một lượng đối tượng tùy ý có thể có cùng một lớp.

Vì vậy, nếu bạn muốn áp dụng một số thuộc tính kiểu CSS nhất định cho một DIV duy nhất, đó sẽ là ID. Nếu bạn muốn các thuộc tính kiểu nhất định áp dụng cho nhiều DIV, đó phải là một lớp.

Lưu ý rằng bạn có thể trộn cả hai. Bạn có thể làm cho hai DIV thuộc cùng một lớp, nhưng cung cấp cho chúng các ID khác nhau. Sau đó, bạn có thể áp dụng kiểu chung cho cả lớp và những thứ cụ thể cho một kiểu cho ID của họ. Trước tiên, trình duyệt sẽ áp dụng kiểu lớp và sau đó là kiểu ID, vì vậy kiểu ID có thể ghi đè lên bất cứ thứ gì mà lớp đã đặt trước đó.

3
Mecki

ID phải là duy nhất. LỚP nên được chia sẻ. Vì vậy, nếu bạn có một số định dạng CSS sẽ được áp dụng cho nhiều DIV, hãy sử dụng một lớp. Nếu chỉ một (theo yêu cầu, không phải là ngẫu nhiên), hãy sử dụng ID.

2
James Curran

Tôi nghĩ tất cả chúng ta đều biết lớp là gì, nhưng nếu bạn nghĩ ID là định danh thay vì công cụ tạo kiểu, bạn sẽ không đi quá xa. Bạn cần một mã định danh khi cố gắng nhắm mục tiêu một cái gì đó và nếu bạn có nhiều hơn một mục có cùng ID, bạn không còn có thể xác định nó ...

Khi viết css cho ID và LỚP, bạn nên sử dụng các lớp css tối thiểu càng nhiều càng tốt và cố gắng không quá nặng nề với ID cho đến khi bạn CÓ, nếu không bạn sẽ liên tục nhắm đến việc viết các khai báo mạnh hơn và sớm có một tập tin css đầy đủ! quan trọng.

1
Steve Perks

Nơi sử dụng ID so với một lớp

Sự khác biệt đơn giản giữa hai loại là trong khi một lớp có thể được sử dụng nhiều lần trên một trang, ID chỉ phải được sử dụng một lần trên mỗi trang. Do đó, phù hợp để sử dụng ID trên phần tử div đang đánh dấu nội dung chính trên trang, vì sẽ chỉ có một phần nội dung chính. Ngược lại, bạn phải sử dụng một lớp để thiết lập các màu hàng xen kẽ trên một bảng, vì theo định nghĩa chúng sẽ được sử dụng nhiều lần.

ID là một công cụ vô cùng mạnh mẽ. Một phần tử có ID có thể là mục tiêu của một đoạn JavaScript thao túng phần tử hoặc nội dung của nó theo một cách nào đó. Thuộc tính ID có thể được sử dụng làm mục tiêu của một liên kết nội bộ, thay thế các thẻ neo bằng các thuộc tính tên. Cuối cùng, nếu bạn làm cho ID của mình rõ ràng và hợp lý, chúng có thể đóng vai trò là một loại tài liệu tự xóa trong một tài liệu. Ví dụ: bạn không nhất thiết phải thêm một nhận xét trước khi một khối cho biết rằng một khối mã sẽ chứa nội dung chính nếu thẻ mở của khối có ID, ví dụ: "chính", "tiêu đề", "chân trang ", Vân vân.

1
Konstantin Tarkus

Nếu bạn đang sử dụng các điều khiển web .Net thì đôi khi việc sử dụng các lớp như .Net sẽ thay đổi id id của web trong thời gian chạy (nơi họ đang sử dụng runat = "server").

Sử dụng các lớp cho phép bạn dễ dàng xây dựng các kiểu với các lớp riêng biệt cho phông chữ, khoảng cách, đường viền, v.v. Tôi thường sử dụng nhiều tệp để lưu trữ các loại thông tin định dạng riêng biệt, ví dụ: basic_styles.css cho định dạng rộng trang web đơn giản, eg6_styles.css cho các kiểu cụ thể của trình duyệt (trong trường hợp này là IE6), v.v. và template_1.css cho thông tin bố cục.

Dù cách nào bạn chọn hãy cố gắng nhất quán để hỗ trợ bảo trì.

0
Toby Mills

Đồng thời, một phần tử bạn cung cấp một id cụ thể có thể được thao tác thông qua các lệnh JavaScript và DOM - chẳng hạn, GetEuityById.

Nói chung, tôi thấy hữu ích khi cung cấp cho tất cả các div cấu trúc chính một id - ngay cả khi ban đầu, tôi không có bất kỳ quy tắc CSS cụ thể nào để áp dụng, tôi có khả năng đó trong tương lai. Mặt khác, tôi sử dụng các lớp cho các yếu tố có thể được sử dụng nhiều lần - ví dụ: một div chứa hình ảnh và chú thích - tôi có thể có một vài lớp, mỗi lớp có giá trị kiểu dáng hơi khác nhau.

Tuy nhiên, hãy nhớ rằng tất cả mọi thứ đều bằng nhau, các quy tắc kiểu trong một đặc tả id được ưu tiên hơn các quy tắc trong một đặc tả lớp.

0
Ken Ray

Ngoài id và các lớp là tuyệt vời để thiết lập kiểu trên một mục riêng lẻ, một bộ các mục tương tự, còn có một lưu ý khác cần nhớ. Nó cũng phụ thuộc vào ngôn ngữ ở một mức độ nào đó. Trong ASP.Net, bạn có thể sử dụng Div và có id. Nhưng, nếu bạn sử dụng Bảng điều khiển thay vì Div, bạn sẽ mất id.

0
CodeRot

Nếu đó là một phong cách bạn muốn sử dụng ở nhiều nơi trên một trang, hãy sử dụng một lớp. Nếu bạn muốn có nhiều tùy chỉnh cho một đối tượng, giả sử một thanh điều hướng ở bên cạnh trang, thì id là tốt nhất, vì bạn không có khả năng cần sự kết hợp các kiểu đó ở bất kỳ nơi nào khác.

0
HitScan

id được coi là định danh duy nhất của thành phần trên trang, giúp thao tác với nó. Bất kỳ kiểu được xác định CSS bên ngoài nào được cho là sẽ được sử dụng trong nhiều phần tử sẽ thuộc về lớp thuộc tính

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>
0
Vinko Vrsalovic

Sử dụng id cho một thành phần duy nhất trên trang mà bạn muốn làm một cái gì đó rất cụ thể và một lớp cho một cái gì đó mà bạn có thể sử dụng lại trên các phần khác của trang.

0
Sam Meldrum

Thuộc tính id được sử dụng cho các thành phần để xác định duy nhất chúng trong tài liệu, trong khi thuộc tính class có thể có cùng giá trị được chia sẻ bởi nhiều thành phần trong cùng một tài liệu.

Vì vậy, thực sự, nếu chỉ có một yếu tố cho mỗi tài liệu sẽ sử dụng kiểu (ví dụ: #title), thì hãy đi với id. Nếu nhiều yếu tố có thể sử dụng kiểu, hãy đi với class.

0
Mark Cidade

Tôi muốn nói rằng tốt nhất là sử dụng một lớp bất cứ khi nào bạn nghĩ rằng một yếu tố phong cách sẽ được lặp lại trên một trang. Các mục như HeaderImage, FooterBar và tương tự cũng như ID vì bạn sẽ chỉ sử dụng một lần và nó sẽ giúp bạn không vô tình sao chép nó, vì một số biên tập viên sẽ cảnh báo bạn khi bạn có ID trùng lặp.

Tôi cũng có thể thấy nó hữu ích nếu bạn sẽ tạo các phần tử div một cách linh hoạt và muốn nhắm mục tiêu một mục cụ thể để định dạng; bạn chỉ có thể cung cấp cho nó ID thích hợp ở thế hệ trái ngược với tìm kiếm phần tử và sau đó cập nhật lớp của nó.

0
Dillie-O

Đối với tôi : Nếu sử dụng các lớp khi tôi sẽ làm một cái gì đó trong CSS hoặc thêm tên cho các thành phần và có thể sử dụng trong tất cả các thành phần trong một trang.

Vì vậy, ID tôi sử dụng cho phần tử duy nhất

Ví dụ :

<div id="post-289" class="box clear black bold radius">

CSS :

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}
0
l2aelba

Các lớp dành cho các kiểu bạn có thể sử dụng nhiều lần trên một trang, ID là các mã định danh duy nhất xác định các trường hợp đặc biệt cho các thành phần. Các tiêu chuẩn nói rằng ID chỉ nên được sử dụng một lần trong một trang. Vì vậy, bạn nên sử dụng các lớp khi bạn muốn sử dụng một kiểu trên nhiều phần tử trong một trang và ID khi bạn chỉ muốn sử dụng một kiểu.

Một điều nữa là đối với các lớp bạn có thể sử dụng nhiều giá trị (bằng cách đặt khoảng trắng ở giữa mỗi lớp, một la "class = 'blagh blah22 blah') có ID, bạn chỉ có thể sử dụng trên ID cho mỗi phần tử.

Các kiểu được xác định cho các kiểu ghi đè ID được xác định cho các lớp, do đó, cài đặt kiểu của #uniquething sẽ ghi đè kiểu .whthing nếu hai xung đột.

Vì vậy, có lẽ bạn nên sử dụng ID cho những thứ như, tiêu đề, 'thanh bên' hoặc bất cứ thứ gì, v.v. - những thứ chỉ xuất hiện một lần trên mỗi trang.

0
thesmallprint

Hương vị lựa chọn của tôi là sử dụng nhận dạng lớp khi các kiểu css được áp dụng cho một số div theo cùng một cách. Nếu cấu trúc hoặc vùng chứa thực sự chỉ được áp dụng một lần hoặc có thể kế thừa kiểu của nó từ mặc định, tôi thấy không có lý do gì để sử dụng nhận dạng lớp.

Vì vậy, nó sẽ phụ thuộc vào việc div của bạn là một trong nhiều; ví dụ: một div đại diện cho một câu hỏi cho một câu trả lời trên trang web stackoverflow. Ở đây bạn sẽ muốn xác định kiểu cho lớp "Trả lời" và áp dụng kiểu này cho mỗi div "Trả lời".

0
James Winans