Sự khác nhau giữa [.] và [#] trong CSS

Anonymous
Anonymous

(.) và (#) trong CSS chúng là gì?

Trong CSS . và # là những bộ chọn (selectors) dành cho ID và Class. Trong đó . là bộ chọn nhắm đến những phần tử trong html có chung một giá trị Class, còn # dùng nhắm đến phần tử cụ thể có giá trị là ID. Các ông có thể xem thêm tại đây (ID và Class trong html)

id và class trong css

Vậy trong CSS chúng khác nhau như thế nào?

Mục đích nhắm đến phần tử

  • . là bộ chọn dành cho Class
  • # là bộ chọn nhắm đến phần tử chứa ID xác định
Điều này có nghĩa là
  • .[tên-class] được dùng để nhắm đến toàn bộ những phần tử html có mang thuộc tính class có giá trị là [tên-class]
  • #[tên-id] được dùng để nhắm đến phần tử duy nhất mang id là [tên-id]
Ví dụ
  • .elements { /* CSS */ } thì có nghĩa là tất cả những phần tử html nào có chứa thuộc tính class là elements sẽ đều được áp dụng /* CSS */
  • #element { /* CSS */ }
    • sẽ chỉ có phần tử html có thuộc tính id giá trị là element mới được áp dụng /*CSS*/
Mặc dù khi viết mã. Nếu một id nhưng được đặt trong nhiều phần tử. Ví dụ :
<span id='element'>element</span>
<span id='element'>element</span>
Thì /* CSS */ vẫn sẽ được áp dụng cho tất cả chúng. Mặc dù cách viết đó là sai, sai hoàn toàn, và đó là trình duyệt chỉ đang "cố gắng" để hiểu người viết code do đó nó vẫn sẽ áp dụng cho tất cả chúng.

Như vậy tổng kết lại, trong Mục đích nhắm đến đối tượng thì .[tên] dùng nhắm đến toàn bộ những phần tử có chứa thuộc tính class là [tên] còn #[tên] dùng nhắm đến phần tử duy nhất có mang id là [tên]. Không thể dùng #[tên] để nhắm đến những phần tử mang class là [tên] và ngược lại không thể dùng .[tên] để nhắm đến phần tử "duy nhất" mang id là [tên]

Giá trị đặc hiệu và tính ưu tiên

Như các ông đã biết id dùng chỉ một đối tượng đã được xác định id và class trong css, còn class là dùng nhắm đến một tập hợp. id và class trong css, vậy thì một đối tượng cụ thể sẽ rõ ràng hơn là một nhóm đối tượng "cụ thể" nào đó.

Vì vậy trong một phần tử ví dụ có chứa cả thuộc tính class và id thì kiểu định dạnh được xác định bằng # luôn được ưu tiên và ghi đè lên các kiểu định dạng của .

Nhìn ví dụ sau
<style>
.elements {
   color:red;
   font-weight:bolder;
}
#element {
   color:blue;
}
</style>
<span class='elements' id='element'>text này chắc chắn màu xanh</span>
text này chắc chắn màu xanh

Giá trị color:blue của id='element' đã ghi đè giá trị color:red; của class='elements' còn font-weight:bolder; không bị ghi đè nên không bị ảnh hưởng.

Phong cách sử dụng chung

Sau này nếu khi thiết kế giao diện web, nếu phần tử chỉ xuất hiện một lần trong trang hoặc nhiều lần nhưng muốn chỉ nhắm đến một phần tử xác định. Hãy sử dụng #[tên-id] với [tên-id] chính là id của phần tử cần nhắm đến.

Còn nếu muốn lặp lại một kiểu định dạng cho nhiều phần tử hãy sử dụng .[tên-class] với [tên-class] là class của những phần tử cần sử dụng chung một định dạng.

Đến đây tớ tạm biệt và hẹn gặp lại được rùi. Đây chỉ là những thứ cơ bản đầu tiên về bộ chọn. (selectors), và còn rất rất nhiều những kiểu chọn khác nhau và mạnh mẽ khác mà các ông có thể tham khảo trên Internet hoặc đợi một bài viết không xa.😋Code Vô Đối bản quyền bài viết của Code Vô Đối nhé thằng ăn cắp. https://codevodoi.blogspot.com Đit_cu_may !
CSS HTML