Tổng cộng có bao nhiêu bộ chọn trong css?

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

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; }

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; }

p em { color: green; }

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; }

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; }

p em { color: green; }

p em { color: green; }

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; }

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; }

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; }

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

.highlight { background-color: #ffcccc; }

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; }

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 CSS chọn (các) phần tử HTML cho mục đích tạo kiểu. Bộ chọn CSS chọn các thành phần HTML theo id, lớp, loại, thuộc tính, v.v.

Có nhiều loại bộ chọn cơ bản khác nhau

• Bộ chọn phần tử
• bộ chọn id
• Bộ chọn lớp
• Bộ chọn chung
• Bộ chọn nhóm
• Bộ chọn thuộc tính
• Bộ chọn lớp giả
• Bộ chọn phần tử giả

Mã HTML. Xem xét mã mẫu để hiểu bộ chọn và cách sử dụng chúng theo cách tốt hơn

HTML

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

#div-container{
    color: blue;
    background-color: gray;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

#div-container{
    color: blue;
    background-color: gray;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

#div-container{
    color: blue;
    background-color: gray;
}

* {
  color: white;
  background-color: black;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

* {
  color: white;
  background-color: black;
}

#div-container{
    color: blue;
    background-color: gray;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

* {
  color: white;
  background-color: black;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

* {
  color: white;
  background-color: black;
}

#div-container{
    color: blue;
    background-color: gray;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container{
    color: blue;
    background-color: gray;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

h1:hover{
    background-color: aqua;
}

h1:hover{
    background-color: aqua;
}

#div-container{
    color: blue;
    background-color: gray;
}

h1:hover{
    background-color: aqua;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

h1:hover{
    background-color: aqua;
}

#div-container{
    color: blue;
    background-color: gray;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

#div-container{
    color: blue;
    background-color: gray;
}

* {
  color: white;
  background-color: black;
}

#div-container{
    color: blue;
    background-color: gray;
}

* {
  color: white;
  background-color: black;
}

#div-container{
    color: blue;
    background-color: gray;
}

Chúng tôi sẽ áp dụng các quy tắc CSS cho mã HTML ở trên

1. bộ chọn phần tử. Bộ chọn phần tử chọn các phần tử HTML dựa trên tên phần tử (hoặc thẻ) ví dụ: p, h1, div, span, v.v.

Phong cách. css. Đoạn mã sau được sử dụng trong mã HTML ở trên bằng cách sử dụng bộ chọn Phần tử giả. Quy tắc CSS này sẽ được áp dụng cho thẻ p trên trang

Có bao nhiêu loại bộ chọn trong CSS?

5 bộ chọn trong CSS là gì?

Bộ chọn trong CSS là gì?

Có bao nhiêu phần tử trong CSS?