Sự khác biệt giữa bộ chọn và CSS là gì?

Nếu bạn chưa quen với CSS thì có lẽ bạn sẽ nhận thấy rằng một số quy tắc có bộ chọn bắt đầu bằng # và một số quy tắc bắt đầu bằng . và thậm chí một số quy tắc không có bộ chọn nào cả. Sự khác biệt giữa hai quy tắc này là quy tắc # là bộ chọn id và . là bộ chọn lớp

• . - là bộ chọn lớp nhắm mục tiêu các phần tử có thuộc tính class chính xác
• # - là bộ chọn id tạo kiểu cho phần tử với thuộc tính

  <div class="blue">div>
  

  1 đã chỉ định

Khi mới bắt đầu học HTML và CSS, tôi đã gặp trở ngại này nhiều lần và biết được sự khác biệt giữa bộ chọn lớp và bộ chọn id có thể giúp bạn tiết kiệm rất nhiều thời gian

Bộ chọn lớp

Trong CSS, chúng ta có khái niệm về bộ chọn này, để chúng ta có thể định kiểu chính xác các phần tử html của mình, chúng ta phải đảm bảo rằng chúng ta sử dụng đúng bộ chọn ở đúng vị trí. Ví dụ: giả sử chúng tôi muốn tạo kiểu cho tất cả các phần tử

<div class="blue">div>

<div class="blue">div>

<div class="blue">div>

.blue {
  background-color: blue;
}

Với quy tắc

<div class="blue">div>

<div class="blue">div>

Bộ chọn ID

Nếu chúng tôi muốn tạo kiểu cho một thành phần html có thuộc tính

<div class="blue">div>

<div class="blue">div>

#blue {
  background-color: blue;
}

Quy tắc trên sẽ chỉ tạo kiểu cho phần tử có thuộc tính

<div class="blue">div>

<div class="blue">div>

<div id="blue">div>

Tóm lược

Nếu bạn thấy có điều gì đó thiếu sót trong hướng dẫn này thì vui lòng cho tôi biết trong phần bình luận bên dưới. Nếu bạn muốn thực hiện bất kỳ thay đổi nào đối với hướng dẫn cụ thể này thì bạn cũng có thể gửi yêu cầu kéo tới repo github cho trang web tại đây. Hướng dẫnEdge. net

Thật tuyệt khi bạn đặt câu hỏi như thế này Paul. Câu trả lời rất quan trọng để hiểu CSS, bởi vì hai bộ chọn này chọn những thứ rất khác nhau. Điều này khá giống với câu hỏi này từ một thời gian trước

Có lẽ một cách hay để giải thích sự khác biệt của chúng là giải thích chúng bằng “tiếng Anh đơn giản”

div vùng chứa

“Chọn bất kỳ phần tử div nào là phần tử con của bất kỳ phần tử nào có tên lớp là “container”

div. thùng đựng hàng

“Chọn bất kỳ phần tử div nào có tên lớp là “container”

Sự khác biệt chính giữa chúng là không gian. Khoảng trắng trong bộ chọn CSS có ý nghĩa rất đặc biệt. Điều đó có nghĩa là phần của bộ chọn xuất hiện bên phải khoảng trắng nằm trong (con của) phần của bộ chọn ở bên trái. Điều này không áp dụng cho ví dụ thứ hai của bạn, vì nó không có khoảng trống

Khái niệm thứ hai tại nơi làm việc ở đây được gọi là thẻ đủ điều kiện, điều này có thể hơi khó hiểu. Bộ chọn đủ điều kiện của thẻ là div.container. Điều đó có nghĩa là nó sẽ chỉ chọn các phần tử