Bộ chọn chung CSS (*)

dsds Bộ chọn id CSS nhắm mục tiêu một phần tử HTML với một id duy nhất.

Cú pháp bộ chọn id:

#id-name {
    property-name: value;
}

Đây là một phần tử HTML có cùng tên id đó làm giá trị thuộc tính:

<div id="id-name"></div>

Bộ chọn id CSS #id-name được đính kèm với <div> phần tử có id-name thuộc tính. Điều đó có nghĩa là bất kỳ thuộc tính tạo kiểu nào bạn thêm vào .id-name trong biểu định kiểu CSS của bạn được áp dụng cho <div> .

Biểu tượng băm (# ) trước tên của id là một cú pháp CSS cụ thể. Khi bạn thêm tên id vào một phần tử HTML làm thuộc tính id, bạn không sử dụng # ký hiệu.

Bây giờ, hãy sử dụng những gì chúng ta vừa học được trong một ví dụ thực tế.

Đây là một HTML <button> phần tử có một số kiểu mặc định được kế thừa từ Biểu định kiểu tác nhân người dùng của trình duyệt:

<button>Button</button>

Giao diện mặc định:

Chán hả?

Hãy ghi đè kiểu nút mặc định bằng cách tạo id CSS có tên là #my-button và cung cấp cho nó một số thuộc tính tạo kiểu:

#my-button {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    background-color: #F7575C;
    color: white;
}

Và sau đó thêm id vào phần tử nút làm thuộc tính id:

<button id="my-button">Button</button>

Kết quả:

Điều quan trọng nhất cần biết về bộ chọn id là không giống như bộ chọn lớp CSS, id chỉ có thể được áp dụng cho một phần tử trên một trang. Điều này làm cho id ít sử dụng linh hoạt hơn so với các lớp, nhưng cũng dễ dự đoán hơn.

Quy tắc chung là chỉ sử dụng id cho các phần tử đơn lẻ xuất hiện một lần trên một trang, chẳng hạn như đầu trang, chân trang hoặc thanh điều hướng.