Câu trả lời:
#là một selector id , được sử dụng để nhắm mục tiêu một đơn yếu tố cụ thể với một id duy nhất, nhưng. là một bộ chọn lớp được sử dụng để nhắm mục tiêu nhiều phần tử với một lớp cụ thể. Theo một cách khác:
#foo {}sẽ tạo kiểu cho phần tử đơn được khai báo bằng một thuộc tínhid="foo".foo {}sẽ định kiểu tất cả các phần tử bằng một thuộc tính class="foo"(bạn cũng có thể có nhiều lớp được gán cho một phần tử, chỉ cần tách chúng bằng dấu cách, ví dụ class="foo bar")Nói chung, bạn sử dụng # để tạo kiểu một cái gì đó bạn biết sẽ chỉ xuất hiện một lần, ví dụ: những thứ như div bố cục cấp cao như thanh bên, khu vực biểu ngữ, v.v.
Các lớp được sử dụng khi kiểu được lặp lại, ví dụ: bạn nói một dạng tiêu đề đặc biệt cho các thông báo lỗi, bạn có thể tạo một kiểu h1.error {}chỉ áp dụng cho<h1 class="error">
Một khía cạnh khác mà các bộ chọn khác nhau là ở tính đặc hiệu của chúng - bộ chọn id được coi là cụ thể hơn bộ chọn lớp. Điều này có nghĩa là khi các kiểu xung đột trên một phần tử, thì các kiểu được xác định bằng bộ chọn cụ thể hơn sẽ ghi đè các bộ chọn ít cụ thể hơn. Ví dụ: đưa ra <div id="sidebar" class="box">bất kỳ quy tắc nào #sidebarvới ghi đè quy tắc xung đột cho.box
Xem Selectutorial để biết thêm các đoạn mồi tuyệt vời trên bộ chọn CSS - chúng cực kỳ mạnh mẽ và nếu quan niệm của bạn chỉ đơn giản là "# được sử dụng cho DIV" thì bạn sẽ đọc chính xác cách sử dụng CSS hiệu quả hơn.
EDIT: Có vẻ như Selectutorial có thể đã truy cập trang web lớn trên bầu trời, vì vậy hãy thử liên kết lưu trữ này thay thế.
Có #nghĩa là nó phù hợp với idmột yếu tố. Dấu .hiệu tên lớp:
<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>
#myRedText {
color: red;
}
.blueText {
color: blue;
}Lưu ý rằng trong tài liệu HTML, thuộc tính id phải là duy nhất , vì vậy nếu bạn có nhiều hơn một thành phần cần một kiểu cụ thể, bạn nên sử dụng tên lớp.
Dấu chấm ( .) biểu thị một tên lớp trong khi hàm băm ( #) biểu thị một phần tử có thuộc tính id cụ thể . Lớp sẽ áp dụng cho bất kỳ phần tử nào được trang trí với lớp cụ thể đó, trong khi kiểu # sẽ chỉ áp dụng cho phần tử có id cụ thể đó.
Tên lớp:
<style>
.class { ... }
</style>
<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>Yếu tố được đặt tên:
<style>
#name { ... }
</style>
<div id="name"></div>Cũng cần lưu ý rằng trong tầng , bộ chọn id ( #) cụ thể hơn .bộ chọn ab ( ). Do đó, các quy tắc trong câu lệnh id sẽ ghi đè các quy tắc trong câu lệnh lớp.
Ví dụ: nếu cả hai câu sau:
.headline {
color:red;
font-size: 3em;
}
#specials {
color:blue;
font-style: italic;
}được áp dụng cho cùng một phần tử HTML:
<h1 id="specials" class="headline">Today's Specials</h1>các màu: xanh quy tắc sẽ ghi đè lên các màu: đỏ cai trị.
Một vài phần mở rộng nhanh về những gì đã được nói ...
Một idphải là duy nhất, nhưng bạn có thể sử dụng cùng một id để làm cho các phong cách khác nhau cụ thể hơn.
Ví dụ: được trích xuất HTML này:
<div id="sidebar">
<h2>Heading</h2>
<ul class="menu">
...
</ul>
</div>
<div id="content">
<h2>Heading</h2>
...
</div>
<div id="footer">
<ul class="menu">
...
</ul>
</div>Bạn có thể áp dụng các phong cách khác nhau với:
#sidebar h2
{ ... }
#sidebar .menu
{ ... }
#content h2
{ ... }
#footer .menu
{ ... }Một điều hữu ích khác cần biết: bạn có thể có nhiều lớp trên một phần tử, bằng cách phân định không gian chúng ...
<ul class="main menu">...</ul>
<ul class="other menu">...</ul>Điều này cho phép bạn có kiểu dáng chung trong .menucác kiểu cụ thể bằng cách sử dụng .main.menuvà.sub.menu
.menu
{ ... }
.main.menu
{ ... }
.other.menu
{ ... }.class nhắm mục tiêu các yếu tố sau:
<div class="class"></div>#class nhắm mục tiêu các yếu tố sau:
<div id="class"></div>Lưu ý rằng id PHẢI là duy nhất trong toàn bộ tài liệu, trong khi bất kỳ số lượng phần tử nào cũng có thể chia sẻ một lớp.
Giống như khá nhiều người đã tuyên bố rồi:
Dấu chấm ( .) biểu thị một lớp và hàm băm ( #) biểu thị ID .
Sự khác biệt cơ bản giữa là bạn có thể sử dụng lại một lớp trên trang của mình nhiều lần, trong khi ID có thể được sử dụng một lần. Đó là, tất nhiên, nếu bạn đang tuân theo các tiêu chuẩn WC3.
Một trang sẽ vẫn hiển thị nếu bạn có nhiều thành phần có cùng ID, nhưng bạn sẽ gặp vấn đề nếu / khi bạn cố gắng cập nhật động các yếu tố đã nói bằng cách gọi chúng bằng ID của chúng, vì chúng không phải là duy nhất.
Nó cũng hữu ích để lưu ý rằng các thuộc tính ID sẽ thay thế các thuộc tính lớp.
# Là một bộ chọn id. Nó chỉ phù hợp với các yếu tố với một id phù hợp. Quy tắc kiểu tiếp theo sẽ khớp với phần tử có thuộc tính id với giá trị "xanh":
#green {color: green}Xem http://www.w3schools.com/css/css_syntax.asp để biết thêm thông tin
Đây là lời khuyên của tôi về việc giải thích các quy tắc te .stylevà #stylelà một phần của ma trận. rằng nếu không theo đúng thứ tự, chúng có thể ghi đè lên nhau hoặc gây ra xung đột.
Đây là dòng lên.
Ma trận
#style 0,0,1,0 id
.style 0,1,0,0 classNếu bạn muốn ghi đè hai cái này, bạn có thể sử dụng <style></style>phù thủy có cấp độ ma trận hoặc 1,0,0,0.
truy vấn của @media sẽ ghi đè mọi thứ ở trên ... Tôi không chắc về điều này nhưng tôi nghĩ rằng bộ chọn ID #chỉ có thể được sử dụng một lần trong một trang.