Một bộ chọn loại duy nhất trong css là gì?

Sau đây là danh sách các bộ chọn CSS phổ biến và được hỗ trợ tốt nhất. Còn nhiều, rất nhiều nữa, nhưng đây là những cái bạn nên biết rõ

Bộ chọn loại phần tử

Bộ chọn CSS cơ bản nhất là Bộ chọn loại phần tử. Đó là một cái tên ưa thích chỉ đơn giản là sử dụng thẻ HTML, không có dấu ngoặc nhọn

Chúng tôi đã sử dụng rộng rãi bộ chọn này rồi

Ví dụ: nếu chúng tôi muốn làm cho tất cả các đoạn văn có văn bản màu xanh lá cây, chúng tôi sẽ sử dụng quy tắc CSS sau

________0

---

Bộ chọn hậu duệ

Khớp một phần tử là hậu duệ của một phần tử khác

Điều này sử dụng hai bộ chọn riêng biệt, được phân tách bằng dấu cách

Ví dụ: nếu chúng tôi muốn tất cả văn bản được nhấn mạnh trong đoạn văn của mình là văn bản màu xanh lá cây, chúng tôi sẽ sử dụng quy tắc CSS sau

p em { color: green; }

0

---

Bộ chọn lớp

Khớp một phần tử có lớp được chỉ định

Để khớp với một thuộc tính cụ thể của

p em { color: green; }

1, chúng tôi luôn bắt đầu bộ chọn bằng một dấu chấm, để biểu thị rằng chúng tôi đang tìm kiếm một giá trị

p em { color: green; }

1. Theo sau khoảng thời gian là giá trị thuộc tính lớp mà chúng tôi muốn so khớp

Ví dụ: nếu chúng tôi muốn tất cả các thành phần có lớp "tô sáng" có màu nền khác, chúng tôi sẽ sử dụng quy tắc CSS sau

p em { color: green; }

3

---

bộ chọn id

So khớp một phần tử có id đã chỉ định

Để khớp với một thuộc tính cụ thể của

p em { color: green; }

4, chúng tôi luôn bắt đầu bộ chọn bằng ký hiệu băm (#) để biểu thị rằng chúng tôi đang tìm kiếm một giá trị

p em { color: green; }

4. Hàm băm được theo sau bởi giá trị thuộc tính mà chúng tôi muốn khớp. Hãy nhớ rằng chúng ta chỉ có thể sử dụng cùng một giá trị thuộc tính

p em { color: green; }

4 một lần, vì vậy bộ chọn id sẽ luôn chỉ khớp với một thành phần trong tài liệu của chúng ta

Ví dụ: nếu chúng tôi muốn phần tử có id là "nội dung", chúng tôi sẽ sử dụng quy tắc CSS sau

p em { color: green; }

7

---

bộ chọn con

So khớp một phần tử là con trực tiếp của một phần tử khác

Ví dụ: nếu chúng tôi muốn tất cả văn bản được nhấn mạnh trong đoạn văn của mình có văn bản màu xanh lá cây, nhưng không có văn bản được nhấn mạnh trong các thành phần khác, chúng tôi sẽ sử dụng quy tắc CSS sau

p em { color: green; }

8

Ghi chú. Bộ chọn này không hoạt động trong Internet Explorer 6

---

Bộ chọn anh chị em liền kề

So khớp một phần tử ngay sau phần tử khác, nhưng không phải là phần tử con của nó

Ví dụ: nếu chúng tôi muốn tất cả các đoạn ngay sau h4 có văn bản màu xanh lá cây, nhưng không phải các đoạn khác, chúng tôi sẽ sử dụng quy tắc CSS sau

p em { color: green; }

9

Ghi chú. Bộ chọn này không hoạt động trong Internet Explorer 6

---

Bộ chọn giả

Thông tin khác về các trạng thái liên kết

Các yếu tố neo là đặc biệt. Bạn có thể tạo kiểu cho phần tử bằng Bộ chọn loại phần tử, nhưng nó có thể không thực hiện chính xác những gì bạn mong đợi. Điều này là do các liên kết có các trạng thái khác nhau, liên quan đến cách chúng được tương tác với. Bốn trạng thái chính của một liên kết là. liên kết, đã truy cập, di chuột, đang hoạt động

Bộ chọn giả có nhiều kích cỡ và hình dạng khác nhau. Cho đến nay, các bộ chọn giả phổ biến nhất được sử dụng để tạo kiểu cho các liên kết của chúng tôi. Có bốn bộ chọn giả khác nhau được sử dụng cùng với các liên kết

linkMột liên kết chưa được truy cập trước đó (được truy cập được xác định bởi lịch sử trình duyệt). đã truy cậpMột liên kết đã được truy cập. hoverMột liên kết mà con trỏ chuột đang "lơ lửng" trên. đang hoạt độngMột liên kết hiện đang được nhấp vào

.highlight { background-color: #ffcccc; }

0

Vì lý do tương thích với trình duyệt, bạn phải luôn chỉ định bộ chọn giả theo thứ tự này. Một cách dễ dàng để ghi nhớ điều này là sử dụng phương pháp ghi nhớ. "Yêu Hà. "

Ghi chú. Thiết bị màn hình cảm ứng không có trạng thái di chuột. Xem No Hover của Trent Walton để biết thêm thông tin về tình trạng khó sử dụng thú vị này

Bạn có thể đọc thêm về các loại bộ chọn giả khác trên trang sitepoint

---

Bộ chọn chung

Phù hợp với mọi yếu tố trên trang

Ví dụ: nếu chúng tôi muốn mọi phần tử có đường viền rộng 1px, chúng tôi sẽ sử dụng quy tắc CSS sau

.highlight { background-color: #ffcccc; }

1

Vì những lý do có thể rõ ràng sau ví dụ trước, bạn nên cẩn thận với bộ chọn chung. Khi nào bạn có thể muốn sử dụng chúng?

Câu trả lời là, không thường xuyên. Nhưng một ví dụ sẽ là đặt lề và phần đệm cho tất cả các phần tử trên trang thành 0. Chúng ta sẽ tìm hiểu một cách tốt hơn để làm điều này trong thời gian ngắn

Bộ chọn lớp giả :only-of-type trong CSS đại diện cho bất kỳ phần tử nào không có anh chị em của loại đã cho

p:only-of-type {
  color: red;
}

Nếu không có thẻ nào đứng trước bộ chọn, nó sẽ khớp với bất kỳ thẻ nào (e. g. :only-of-type). Nếu một bộ chọn khác đứng trước nó, nó sẽ khớp dựa trên loại thẻ mà bộ chọn đó khớp. Ví dụ: .example:only-of-type sẽ hoạt động giống như p:only-of-type nếu .example được áp dụng cho một thành phần đoạn văn

Ví dụ đơn giản

Một danh sách chỉ chứa một mục danh sách. Một danh sách khác chứa ba mục danh sách. Chúng tôi có thể nhắm mục tiêu mục danh sách chỉ có một mình với :only-of-type

Check out this Pen!

Mặc dù có lẽ đó không phải là ví dụ tốt nhất, bởi vì :only-child sẽ hoạt động tốt ở đó vì các mục danh sách là con duy nhất có thể có của danh sách. Thay vào đó, nếu chúng tôi sử dụng div, chúng tôi có thể nhắm mục tiêu một đoạn bên trong div nếu đó là đoạn duy nhất, mặc dù các phần tử khác cũng ở trong đó

Check out this Pen!

Cần lưu ý

Để giải trí, bạn có thể đạt được lựa chọn tương tự như :only-of-type với

Check out this Pen!

1 hoặc

Check out this Pen!

2. Tuy nhiên, chúng sử dụng hai bộ chọn chuỗi, có nghĩa là độ đặc hiệu gấp đôi so với :only-of-type

Bộ chọn duy nhất trong CSS là gì?

5 loại bộ chọn là gì?

Đó là một ví dụ về một bộ chọn loại?

Ví dụ về bộ chọn trong CSS là gì?