programming css

Bộ chọn trong CSS

Chúng rất hữu ích khi bạn muốn áp dụng các kiểu giống nhau cho nhiều phần tử HTML, bởi vì bạn sẽ không lặp lại chính mình bằng cách viết cùng một dòng mã cho các phần tử khác nhau

Bộ chọn CSS cũng hữu ích khi bạn muốn thực hiện thay đổi - bạn chỉ cần thực hiện thay đổi ở một nơi, giúp bạn tiết kiệm rất nhiều thời gian

Bộ chọn CSS là một trong những điều đầu tiên bạn cần học khi bắt đầu viết mã CSS

Và có nhiều bộ chọn có sẵn để lựa chọn, cùng với một số cách khác nhau để sử dụng chúng - nhiều hơn những gì bạn có thể nhận ra

Như đã nói, không cần phải lo lắng - bạn không cần phải ghi nhớ mọi thứ

Bảng gian lận này bao gồm các bộ chọn được sử dụng phổ biến nhất mà bạn cần biết khi bắt đầu. Đánh dấu nó để bạn có thể quay lại bất cứ khi nào bạn cần một lời nhắc nhanh khi bạn đang thực hiện dự án thiết kế web tiếp theo của mình

Đây là những gì chúng tôi sẽ đề cập

  1. Bộ chọn CSS đơn giản
    1. bộ chọn chung
    2. bộ chọn loại
    3. Bộ chọn lớp
    4. bộ chọn ID
  2. bộ chọn thuộc tính
    1. Bộ chọn 
      #my_id {
    property: value;
}
      8
    2. Bộ chọn 
      #my_id {
    property: value;
}
      9
    3. Bộ chọn 
      The best place to learn to code for free!
      0
    4. Bộ chọn 
      The best place to learn to code for free!
      1
    5. Bộ chọn 
      The best place to learn to code for free!
      2
    6. Bộ chọn 
      The best place to learn to code for free!
      3
  3. Nhóm bộ chọn CSS
  4. bộ kết hợp CSS
    1. Tổ hợp hậu duệ
    2. Bộ kết hợp con trực tiếp
    3. Bộ kết hợp anh chị em chung
    4. Tổ hợp anh chị em liền kề
  5. Bộ chọn lớp giả
    1. Bộ chọn lớp giả cho các liên kết
    2. Bộ chọn lớp giả cho đầu vào
    3. Bộ chọn lớp giả cho vị trí
  6. Bộ chọn phần tử giả
    1. Phần tử giả 
      The best place to learn to code for free!
      4
    2. Phần tử giả 
      The best place to learn to code for free!
      5
    3. Phần tử giả 
      The best place to learn to code for free!
      6
    4. Phần tử giả 
      The best place to learn to code for free!
      7

Bộ chọn CSS đơn giản

Bộ chọn cho phép bạn nhắm mục tiêu và chọn các phần cụ thể của tài liệu cho mục đích tạo kiểu

Bộ chọn đơn giản chọn trực tiếp một hoặc nhiều phần tử

  • Bằng cách sử dụng bộ chọn chung, 
    The best place to learn to code for free!
    8
  • Dựa trên tên/loại của phần tử
  • Dựa trên giá trị lớp của phần tử
  • Dựa trên giá trị ID của phần tử

Bằng cách tìm hiểu cách thức hoạt động của các bộ chọn đơn giản nhất, bạn có thể hiểu cách sử dụng những bộ chọn phức tạp hơn

Các bộ chọn đơn giản thường sẽ là những bộ chọn bạn sẽ sử dụng nhiều nhất và những bộ chọn bạn sẽ quen thuộc nhất nếu bạn có một số kinh nghiệm viết mã CSS

Bộ chọn chung CSS

Bộ chọn chung, còn được gọi là ký tự đại diện, chọn mọi thứ - mọi thành phần trong tài liệu

Để sử dụng bộ chọn chung, hãy sử dụng ký tự dấu hoa thị, 

The best place to learn to code for free!
8

#my_id {
    property: value;
}
2

Bạn có thể sử dụng bộ chọn chung để đặt lại phần đệm và lề mặc định của trình duyệt về 0 ở đầu tệp trước khi bạn thêm bất kỳ kiểu nào khác

#my_id {
    property: value;
}
3

Bộ chọn loại CSS

Bộ chọn loại CSS chọn tất cả các thành phần HTML của loại đã chỉ định

Để sử dụng nó, hãy đề cập đến tên của phần tử HTML

Ví dụ: nếu bạn muốn áp dụng một kiểu cho từng đoạn trong tài liệu HTML, bạn sẽ chỉ định phần tử 

#my_id {
    property: value;
}
40

#my_id {
    property: value;
}
5

Đoạn mã trên khớp và chọn tất cả các phần tử 

#my_id {
    property: value;
}
40 trong tài liệu và tạo kiểu cho chúng

Bộ chọn lớp CSS

Bộ chọn lớp khớp và chọn các phần tử HTML dựa trên giá trị của lớp đã cho của chúng. Cụ thể, nó chọn mọi phần tử trong tài liệu với tên lớp cụ thể đó

Với bộ chọn lớp, bạn có thể chọn nhiều thành phần cùng lúc và tạo kiểu cho chúng theo cùng một cách mà không cần sao chép và dán các kiểu giống nhau cho từng thành phần riêng biệt

Các lớp có thể tái sử dụng, làm cho chúng trở thành một lựa chọn tốt để thực hành phát triển DRY. DRY là một nguyên tắc lập trình và là viết tắt của 'Don't Repeat Yourself'. Như tên gợi ý, mục đích là để tránh viết mã lặp đi lặp lại bất cứ khi nào có thể

Để chọn các phần tử bằng bộ chọn lớp, hãy sử dụng ký tự dấu chấm, 

#my_id {
    property: value;
}
42, theo sau là tên của lớp

#my_id {
    property: value;
}
8

Trong đoạn mã trên, các phần tử có lớp 

#my_id {
    property: value;
}
43 được chọn và tạo kiểu tương ứng

Bộ chọn ID CSS

Bộ chọn ID chọn một phần tử HTML dựa trên giá trị của thuộc tính ID của nó

Hãy nhớ rằng ID của một phần tử phải là duy nhất trong một tài liệu, nghĩa là chỉ nên có một phần tử HTML với giá trị ID đã cho đó. Bạn không thể sử dụng cùng một giá trị ID trên một phần tử khác ngoài phần tử đó

Để chọn một phần tử có ID cụ thể, hãy sử dụng ký tự băm, 

#my_id {
    property: value;
}
44, theo sau là tên của giá trị ID

#my_id {
    property: value;
}

Đoạn mã trên sẽ chỉ khớp với phần tử duy nhất có giá trị ID là 

#my_id {
    property: value;
}
45

Điều đáng nói là tốt nhất bạn nên thử và hạn chế sử dụng bộ chọn này và chọn sử dụng bộ chọn lớp thay thế. Áp dụng các kiểu bằng cách sử dụng bộ chọn ID là không lý tưởng vì các kiểu không thể sử dụng lại

Bộ chọn thuộc tính CSS

Nhiều phần tử HTML có thuộc tính

thuộc tính HTML

  • Cung cấp thông tin bổ sung về các phần tử HTML
  • Luôn được chỉ định trong thẻ bắt đầu [hoặc mở]
  • Thường có các cặp tên/giá trị, chẳng hạn như 
    #my_id {
    property: value;
}
    46
  • #my_id {
    property: value;
}
    47 trong cặp tên/giá trị phải được đặt trong dấu ngoặc kép

Một trong những thuộc tính HTML phổ biến nhất mà bạn có thể đã gặp là thuộc tính 

#my_id {
    property: value;
}
48, thuộc tính này được thêm vào thẻ mở đầu 
#my_id {
    property: value;
}
49 và chỉ định URL mà thẻ 
#my_id {
    property: value;
}
49 liên kết đến.

The best place to learn to code for free!

Giá trị của 

#my_id {
    property: value;
}
48, 
The best place to learn to code for free!
02, là URL mà người dùng sẽ được đưa đến khi họ nhấp vào văn bản liên kết, 
The best place to learn to code for free!
03

Bộ chọn thuộc tính khớp và chọn các phần tử HTML dựa trên sự hiện diện của một thuộc tính hoặc một giá trị thuộc tính cụ thể

Có nhiều loại bộ chọn thuộc tính khác nhau

Dưới đây là một số bộ chọn thuộc tính phổ biến nhất

Bộ chọn 
#my_id {
    property: value;
}
8

Để sử dụng bộ chọn thuộc tính, hãy sử dụng một cặp dấu ngoặc vuông, 

The best place to learn to code for free!
05, để chọn thuộc tính bạn muốn

Cú pháp chung cho bộ chọn thuộc tính như sau

#my_id {
    property: value;
}
4

Bộ chọn này chọn một phần tử nếu thuộc tính đã cho tồn tại

Trong ví dụ sau, các phần tử có thuộc tính 

The best place to learn to code for free!
06 hiện tại được chọn, bất kể giá trị cụ thể của 
The best place to learn to code for free!
06 là gì

The best place to learn to code for free!
0

Trong ví dụ trên, các phần tử 

The best place to learn to code for free!
08 có tên thuộc tính 
The best place to learn to code for free!
06 được chọn, bất kể giá trị của 
The best place to learn to code for free!
06 là gì

Như đã nói, bạn có thể cụ thể hơn với kiểu dáng của mình

Bộ chọn 
#my_id {
    property: value;
}
9

Bạn có thể chỉ định giá trị của thuộc tính bằng cú pháp sau

The best place to learn to code for free!
2

Vì vậy, nếu bạn muốn tạo kiểu cho các phần tử 

The best place to learn to code for free!
08 bằng thuộc tính 
The best place to learn to code for free!
06 có giá trị chính xác là 
The best place to learn to code for free!
24, bạn sẽ thực hiện như sau

The best place to learn to code for free!
6

Đoạn mã trên khớp với các phần tử 

The best place to learn to code for free!
08 trong đó tên thuộc tính 
The best place to learn to code for free!
06 có giá trị chính xác là 
The best place to learn to code for free!
24

Bộ chọn 
The best place to learn to code for free!
0

Bạn cũng có thể chỉ định rằng giá trị của thuộc tính bắt đầu bằng một ký tự cụ thể bằng cú pháp sau

#my_id {
    property: value;
}
30

Ví dụ: nếu bạn muốn chọn và tạo kiểu cho bất kỳ phần tử 

The best place to learn to code for free!
08 nào có thuộc tính 
The best place to learn to code for free!
06 với giá trị bắt đầu bằng 
The best place to learn to code for free!
61, bạn sẽ thực hiện như sau

#my_id {
    property: value;
}
31

Đoạn mã trên chọn bất kỳ phần tử 

The best place to learn to code for free!
08 nào mà tên thuộc tính 
The best place to learn to code for free!
06 có giá trị bắt đầu bằng 
The best place to learn to code for free!
61

Bộ chọn 
The best place to learn to code for free!
1

Bạn cũng có thể chỉ định rằng giá trị của thuộc tính kết thúc bằng một ký tự cụ thể bằng cú pháp sau

#my_id {
    property: value;
}
32

Ví dụ: nếu bạn muốn chọn các phần tử 

The best place to learn to code for free!
08 có tên thuộc tính 
The best place to learn to code for free!
06 với giá trị kết thúc bằng 
The best place to learn to code for free!
68, bạn sẽ thực hiện như sau

#my_id {
    property: value;
}
33

Bộ chọn 
The best place to learn to code for free!
2

Bạn cũng có thể chỉ định rằng giá trị thuộc tính chứa một chuỗi con cụ thể - bộ chọn này được gọi là Bộ chọn chứa chuỗi con thuộc tính và có cú pháp sau

#my_id {
    property: value;
}
34

Trong trường hợp này, chuỗi 

#my_id {
    property: value;
}
47 cần phải có trong giá trị của thuộc tính, theo sau là bất kỳ số lượng ký tự nào khác - 
#my_id {
    property: value;
}
47 không cần phải là một từ nguyên vẹn

Ví dụ: nếu bạn muốn chọn các phần tử 

The best place to learn to code for free!
08 có thuộc tính 
The best place to learn to code for free!
06 với giá trị chứa chuỗi 
#my_id {
    property: value;
}
304, bạn sẽ thực hiện như sau

#my_id {
    property: value;
}
35

Đoạn mã trên chọn các phần tử 

The best place to learn to code for free!
08 có tên thuộc tính 
The best place to learn to code for free!
06 khi chuỗi 
#my_id {
    property: value;
}
304 có trong giá trị của thuộc tính - ngay cả dưới dạng chuỗi con [chuỗi con là một từ bên trong một từ khác]

Miễn là giá trị của thuộc tính chứa 

#my_id {
    property: value;
}
304, thì phần tử HTML được chọn - ví dụ: phần tử này có thể khớp thuộc tính 
The best place to learn to code for free!
06 với giá trị của 
#my_id {
    property: value;
}
304, 
#my_id {
    property: value;
}
311 hoặc 
#my_id {
    property: value;
}
312

Bộ chọn 
The best place to learn to code for free!
3

Bạn cũng có thể chỉ định rằng bộ chọn khớp với giá trị thuộc tính chứa toàn bộ từ bằng cú pháp sau

#my_id {
    property: value;
}
36

Trong trường hợp này, chuỗi 

#my_id {
    property: value;
}
47 cần phải là một từ nguyên vẹn

Ví dụ: nếu bạn muốn chọn các phần tử 

The best place to learn to code for free!
08 có tên thuộc tính 
The best place to learn to code for free!
06 với giá trị chứa từ 
#my_id {
    property: value;
}
304, bạn sẽ thực hiện như sau

#my_id {
    property: value;
}
37

Đoạn mã trên sẽ khớp với thuộc tính 

The best place to learn to code for free!
06 có giá trị là 
#my_id {
    property: value;
}
304 chứa các loại khoảng trắng khác nhau

Mã sẽ không chọn các phần tử có giá trị 

The best place to learn to code for free!
06 là 
#my_id {
    property: value;
}
311 hoặc 
#my_id {
    property: value;
}
312 như bạn đã thấy trong một ví dụ trước đó bởi vì 
#my_id {
    property: value;
}
304 cần phải là một từ hoàn chỉnh - không phải là một chuỗi con

Nhóm bộ chọn CSS

Với bộ chọn nhóm, bạn có thể nhắm mục tiêu và tạo kiểu cho nhiều phần tử cùng một lúc

Để sử dụng bộ chọn nhóm, hãy sử dụng dấu phẩy, 

#my_id {
    property: value;
}
324 để nhóm và tách các thành phần khác nhau mà bạn muốn chọn

Ví dụ: đây là cách bạn sẽ nhắm mục tiêu nhiều phần tử như 

#my_id {
    property: value;
}
325, 
#my_id {
    property: value;
}
40 và 
#my_id {
    property: value;
}
327 cùng một lúc và áp dụng các kiểu giống nhau cho từng phần tử đó

#my_id {
    property: value;
}
38

Đoạn mã trên khớp với tất cả các phần tử 

#my_id {
    property: value;
}
325, 
#my_id {
    property: value;
}
40 và 
#my_id {
    property: value;
}
327 trên trang và ba phần tử đó sẽ có cùng kiểu dáng

Bộ kết hợp CSS

Bộ kết hợp cho phép bạn kết hợp hai phần tử dựa trên mối quan hệ giữa các phần tử và vị trí của chúng trong tài liệu

Về cơ bản, bạn có thể kết hợp hai bộ chọn đơn giản theo cách giải thích mối quan hệ giữa các bộ chọn CSS đó. Bộ kết hợp là một loại bộ chọn xác định và mô tả mối quan hệ giữa hai bộ chọn

Có bốn loại tổ hợp

  • Tổ hợp hậu duệ
  • Bộ kết hợp con trực tiếp
  • Bộ kết hợp anh chị em chung
  • Bộ kết hợp anh chị em liền kề

Trình kết hợp hậu duệ

Như tên của nó, bộ kết hợp hậu duệ chỉ chọn các hậu duệ của phần tử được chỉ định

Về cơ bản, trước tiên bạn đề cập đến phần tử cha, để lại một khoảng trắng, sau đó đề cập đến phần tử con của phần tử đầu tiên, là phần tử con của phần tử cha. Phần tử con là một phần tử bên trong phần tử cha

Hãy lấy những điều sau đây làm ví dụ

#my_id {
    property: value;
}
39

Trong ví dụ trên, 

#my_id {
    property: value;
}
325 là phần tử cha và 
#my_id {
    property: value;
}
332, 
#my_id {
    property: value;
}
327 và hai phần tử 
#my_id {
    property: value;
}
40 là phần tử con vì chúng nằm trong phần tử 
#my_id {
    property: value;
}
325. Ngoài ra còn có một đoạn bên ngoài 
#my_id {
    property: value;
}
325

Nếu bạn chỉ muốn tạo kiểu cho các đoạn văn bên trong 

#my_id {
    property: value;
}
325, đây là những gì bạn sẽ làm

#my_id {
    property: value;
}
50

Trong ví dụ trên, chỉ có hai đoạn bên trong 

#my_id {
    property: value;
}
325 có văn bản 
#my_id {
    property: value;
}
339 được tạo kiểu. Hai phần tử con khác và đoạn bên ngoài 
#my_id {
    property: value;
}
325 với văn bản 
#my_id {
    property: value;
}
341 không được tạo kiểu

Bộ kết hợp con trực tiếp

Tổ hợp con trực tiếp, còn được gọi là hậu duệ trực tiếp, chỉ chọn các con trực tiếp của cha mẹ

Để sử dụng bộ kết hợp con trực tiếp, hãy chỉ định phần tử cha, sau đó thêm ký tự 

#my_id {
    property: value;
}
342 theo sau là phần tử con trực tiếp của phần tử cha mà bạn muốn chọn

Hãy lấy những điều sau đây làm ví dụ

#my_id {
    property: value;
}
51

Có một 

#my_id {
    property: value;
}
325 là phần tử cha

Bên trong phần tử cha, có hai phần tử 

The best place to learn to code for free!
08 là phần tử con trực tiếp của phần tử 
#my_id {
    property: value;
}
325

Ngoài ra còn có một phần tử 

The best place to learn to code for free!
08 khác bên trong phần tử 
#my_id {
    property: value;
}
40. Phần tử 
#my_id {
    property: value;
}
40 là phần tử con của 
#my_id {
    property: value;
}
325, nhưng phần tử 
The best place to learn to code for free!
08 bên trong đoạn văn không phải là phần tử con trực tiếp của 
#my_id {
    property: value;
}
325

Vì vậy, để chỉ truy cập các phần tử 

The best place to learn to code for free!
08 là con trực tiếp của 
#my_id {
    property: value;
}
325, bạn sẽ làm như sau

#my_id {
    property: value;
}
52

Đoạn mã trên khớp với các phần tử 

The best place to learn to code for free!
08 được lồng trực tiếp bên trong phần tử 
#my_id {
    property: value;
}
325 và là phần tử con ngay lập tức

Tổng hợp anh chị em

Bộ kết hợp anh chị em chung chọn anh chị em

Bạn có thể chỉ định phần tử đầu tiên và phần tử thứ hai xuất hiện sau phần tử đầu tiên. Yếu tố thứ hai không cần phải đến ngay sau yếu tố đầu tiên

Để sử dụng bộ kết hợp anh chị em chung, hãy chỉ định phần tử đầu tiên, sau đó sử dụng ký tự 

#my_id {
    property: value;
}
356 theo sau phần tử thứ hai cần theo sau phần tử đầu tiên

Hãy lấy những điều sau đây làm ví dụ

#my_id {
    property: value;
}
53

#my_id {
    property: value;
}
325 có phần tử 
#my_id {
    property: value;
}
40 được lồng bên trong nó. Phần tử 
#my_id {
    property: value;
}
40 cụ thể đó là con của 
#my_id {
    property: value;
}
325

Ngoài ra còn có hai đoạn với văn bản 

#my_id {
    property: value;
}
341 và một phần tử 
#my_id {
    property: value;
}
362. Cả ba phần tử đó đều là anh em ruột của phần tử 
#my_id {
    property: value;
}
325

Vì vậy, để chọn các phần tử 

#my_id {
    property: value;
}
40 là anh em của phần tử 
#my_id {
    property: value;
}
325, bạn sẽ làm như sau

#my_id {
    property: value;
}
54

Đoạn mã trên tạo kiểu cho cả hai phần tử 

#my_id {
    property: value;
}
40 xuất hiện sau phần tử 
#my_id {
    property: value;
}
325

Nó tạo kiểu cho cả phần tử 

#my_id {
    property: value;
}
40 không xuất hiện ngay sau phần tử 
#my_id {
    property: value;
}
325, chẳng hạn như phần tử 
#my_id {
    property: value;
}
40 theo sau phần tử 
#my_id {
    property: value;
}
362. Nó làm như vậy bởi vì nó vẫn đến sau 
#my_id {
    property: value;
}
325

Kết hợp anh chị em liền kề

Bộ kết hợp anh chị em liền kề cụ thể hơn bộ kết hợp anh chị em chung

Bộ chọn này chỉ khớp với anh chị em trực tiếp. Anh chị em ngay lập tức là anh chị em đến ngay sau phần tử đầu tiên

Để sử dụng bộ kết hợp anh chị em liền kề, hãy chỉ định phần tử đầu tiên, sau đó thêm ký tự 

#my_id {
    property: value;
}
373 theo sau phần tử bạn muốn chọn ngay sau phần tử đầu tiên

Hãy xem lại ví dụ từ phần trước

#my_id {
    property: value;
}
53

Mặc dù phần tử 

#my_id {
    property: value;
}
40 theo sau phần tử 
#my_id {
    property: value;
}
362 là anh chị em của phần tử 
#my_id {
    property: value;
}
325, nhưng nó không phải là anh chị em trực tiếp như phần tử 
#my_id {
    property: value;
}
40 xuất hiện trước 
#my_id {
    property: value;
}
362

Vì vậy, để chỉ nhắm mục tiêu phần tử 

#my_id {
    property: value;
}
40 xuất hiện ngay sau 
#my_id {
    property: value;
}
325, bạn sẽ làm như sau

#my_id {
    property: value;
}
56

Bộ chọn lớp giả

Bộ chọn lớp giả chọn các phần tử ở trạng thái cụ thể

Một số ví dụ về trạng thái mà phần tử có thể ở là

  • Phần tử đang được con trỏ chuột di chuột qua
  • Phần tử này là phần tử đầu tiên thuộc loại của nó
  • Liên kết đã được truy cập trước đây từ trình duyệt cụ thể đó
  • Liên kết chưa được truy cập trước đây từ trình duyệt cụ thể đó
  • Hộp kiểm/nút radio đã được chọn

Bộ chọn lớp giả bắt đầu bằng dấu hai chấm,

#my_id {
    property: value;
}
381, theo sau là từ khóa phản ánh trạng thái của phần tử được chỉ định

Cú pháp chung trông giống như sau

#my_id {
    property: value;
}
57

Bộ chọn lớp giả cho liên kết

Có bộ chọn dựa trên thông tin trạng thái liên kết

Bộ chọn 

#my_id {
    property: value;
}
382 áp dụng kiểu dáng khi phần tử chưa được truy cập trước đó

#my_id {
    property: value;
}
58

Bộ chọn 

#my_id {
    property: value;
}
383 áp dụng khi phần tử đã được truy cập trước đó trong trình duyệt hiện tại

#my_id {
    property: value;
}
59

Bộ chọn 

#my_id {
    property: value;
}
384 áp dụng khi con trỏ chuột di chuyển qua một phần tử

#my_id {
    property: value;
}
80

Bộ chọn 

#my_id {
    property: value;
}
385 áp dụng khi người dùng đã gắn thẻ vào một phần tử

#my_id {
    property: value;
}
81

Bộ chọn 

#my_id {
    property: value;
}
386 áp dụng khi phần tử được chọn sau khi được nhấp vào và sau khi giữ nút chuột

#my_id {
    property: value;
}
82

Bộ chọn lớp giả cho đầu vào

Bộ chọn 

#my_id {
    property: value;
}
385 mà bạn đã thấy trước đó cho các liên kết cũng được sử dụng cho đầu vào

#my_id {
    property: value;
}
83

Bộ chọn 

#my_id {
    property: value;
}
388 chọn đầu vào được yêu cầu. Đầu vào được yêu cầu có thuộc tính 
#my_id {
    property: value;
}
389

#my_id {
    property: value;
}
84

Bộ chọn 

#my_id {
    property: value;
}
390 chọn hộp kiểm hoặc nút radio đã được chọn

#my_id {
    property: value;
}
85

Bộ chọn 

#my_id {
    property: value;
}
391 chọn các đầu vào bị tắt. Đầu vào bị vô hiệu hóa có thuộc tính 
#my_id {
    property: value;
}
392. Theo mặc định, nhiều kiểu đầu vào bị vô hiệu hóa của trình duyệt có màu xám nhạt dần

#my_id {
    property: value;
}
86

Bộ chọn lớp giả cho vị trí

Bộ chọn con đầu tiên, 

#my_id {
    property: value;
}
393, chọn phần tử đầu tiên, phần tử này sẽ là phần tử con đầu tiên bên trong vùng chứa chính

Ví dụ: đây là cách bạn chọn một phần tử 

The best place to learn to code for free!
08 khi nó là phần tử con đầu tiên trong vùng chứa chính

#my_id {
    property: value;
}
87

Bộ chọn con cuối cùng, 

#my_id {
    property: value;
}
395, chọn phần tử cuối cùng, đây sẽ là phần tử con cuối cùng bên trong vùng chứa chính

Đây là cách bạn chọn một phần tử 

The best place to learn to code for free!
08 khi nó là phần tử con cuối cùng trong vùng chứa chính

#my_id {
    property: value;
}
88

Bộ chọn 

#my_id {
    property: value;
}
397 chọn một phần tử con bên trong một vùng chứa dựa trên vị trí của nó trong một nhóm anh chị em

Nó lấy một số nguyên làm đối số và chọn một phần tử dựa trên giá trị đã cho. Cú pháp chung cho bộ chọn trông giống như thế này

#my_id {
    property: value;
}
89

Bộ chọn 

#my_id {
    property: value;
}
397 hữu ích khi bạn muốn chọn các phần tử dựa trên một biểu thức, chẳng hạn như chọn các phần tử chẵn hoặc lẻ

#my_id {
    property: value;
}
0

Bộ chọn loại đầu tiên, 

#my_id {
    property: value;
}
399, chọn các phần tử là phần tử đầu tiên của loại cụ thể đó trong vùng chứa chính

Ví dụ: đây là cách bạn chọn 

#my_id {
    property: value;
}
40 đầu tiên bên trong một 
#my_id {
    property: value;
}
325

#my_id {
    property: value;
}
1

Bộ chọn loại cuối cùng, 

#my_id {
    property: value;
}
502, chọn các phần tử là phần tử cuối cùng của loại cụ thể đó trong vùng chứa chính

Ví dụ: đây là cách bạn chọn 

#my_id {
    property: value;
}
40 cuối cùng bên trong một 
#my_id {
    property: value;
}
325

#my_id {
    property: value;
}
2

Bộ chọn phần tử giả

Bộ chọn phần tử giả được sử dụng để tạo kiểu cho một phần cụ thể của phần tử - bạn có thể sử dụng chúng để chèn nội dung mới hoặc thay đổi giao diện của một phần nội dung cụ thể

Ví dụ: bạn có thể sử dụng phần tử giả để tạo kiểu khác cho chữ cái đầu tiên hoặc dòng đầu tiên của phần tử. Bạn cũng có thể sử dụng phần tử giả để thêm nội dung mới trước hoặc sau phần tử đã chọn

Trái ngược với các lớp giả được đặt trước ký tự 

#my_id {
    property: value;
}
381, các phần tử giả được đặt trước ký tự 
#my_id {
    property: value;
}
506

Ký tự 

#my_id {
    property: value;
}
506 được theo sau bởi một từ khóa cho phép bạn tạo kiểu cho một phần cụ thể của phần tử đã chọn

Cú pháp chung trông giống như sau

#my_id {
    property: value;
}
3

Đảm bảo sử dụng ký tự 

#my_id {
    property: value;
}
506 thay vì ký tự 
#my_id {
    property: value;
}
381 khi sử dụng bộ chọn phần tử giả - điều này sẽ giúp phân biệt lớp giả với phần tử giả

Bây giờ, hãy xem một số phần tử giả phổ biến nhất mà bạn sẽ gặp phải

Phần tử giả 
The best place to learn to code for free!
4

Bạn có thể sử dụng phần tử giả 

The best place to learn to code for free!
4 để chèn nội dung trước phần tử

#my_id {
    property: value;
}
4

Phần tử giả 
The best place to learn to code for free!
5

Và bạn có thể sử dụng phần tử giả 

The best place to learn to code for free!
5 để chèn nội dung vào cuối phần tử

#my_id {
    property: value;
}
5

Phần tử giả 
The best place to learn to code for free!
6

Bạn cũng có thể sử dụng phần tử giả 

The best place to learn to code for free!
6 để chọn chữ cái đầu tiên của đoạn văn, điều này rất hữu ích khi bạn muốn tạo kiểu cho chữ cái đầu tiên theo một cách nhất định

#my_id {
    property: value;
}
6

Phần tử giả 
The best place to learn to code for free!
7

Và bạn có thể sử dụng phần tử giả 

The best place to learn to code for free!
7 để chọn dòng đầu tiên của đoạn văn

#my_id {
    property: value;
}
7

Sự kết luận

Hy vọng rằng bạn thấy bảng cheat này của các bộ chọn CSS được sử dụng rộng rãi nhất là hữu ích

Để tìm hiểu thêm về thiết kế web, hãy xem Chứng nhận thiết kế web đáp ứng của freeCodeCamp. Trong các bài học tương tác, bạn sẽ học HTML và CSS bằng cách xây dựng 15 dự án thực hành và 5 dự án chứng nhận

Cảm ơn đã đọc và chúc bạn viết mã vui vẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Dionysia Lemonaki

Học một cái gì đó mới mỗi ngày và viết về nó

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

4 bộ chọn CSS là gì?

Bộ chọn CSS .
Bộ chọn đơn giản [chọn các phần tử dựa trên tên, id, lớp]
Bộ chọn tổ hợp [chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng]
Bộ chọn lớp giả [chọn các phần tử dựa trên một trạng thái nhất định]
Bộ chọn phần tử giả [chọn và tạo kiểu cho một phần của phần tử]

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

5. 1 Khớp mẫu. Trong CSS, các quy tắc so khớp mẫu xác định quy tắc kiểu nào áp dụng cho các phần tử trong cây tài liệu. .
5. 2 Cú pháp chọn. .
5. 3 Bộ chọn phổ quát. .
5. 4 Bộ chọn loại. .
5. 5 bộ chọn hậu duệ. .
5. 6 Bộ chọn con. .
5. 7 bộ chọn anh chị em liền kề. .
5. 8 bộ chọn thuộc tính

Bộ chọn CSS giải thích bằng ví dụ là gì?

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. 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

Bộ chọn đơn giản trong CSS là gì?

Bộ chọn CSS đơn giản chọn trực tiếp một hoặc nhiều phần tử trên cơ sở loại phần tử, lớp hoặc id. Chúng ta sẽ bắt đầu tìm hiểu các loại bộ chọn CSS khác nhau bằng cách chỉnh sửa tài liệu ví dụ bên dưới. mục lục. html.

Bài Viết Liên Quan

Cách cải thiện độ chính xác của cây quyết định trong python
What is the Part D initial coverage limit for 2023?
Excel có thể đọc html không?
Viết chương trình tạo tất cả các tổ hợp từ với các chữ cái trong một chuỗi trong python
Hết thời gian chờ truy vấn chuỗi kết nối mysql
Khởi tạo lớp trong PHP
Mã hóa hiệu quả trong Python
Jspreadsheet có miễn phí không?
Tên hệ điều hành NT Python là gì?
Nhiều người dùng có thể chỉnh sửa tệp Excel được bảo vệ bằng mật khẩu không?
When is Rahu Ketu Transit 2023 2024?
Cái gì cho mỗi và mỗi trong php?
C ++ sang python reddit
Học javascript reddit 2022
Phụ nhau là bao nhiêu độ
Phần phụ thuộc của nhà soạn nhạc của bạn yêu cầu phiên bản php >= 7.4 0
Selenium tiêu đề bộ chọn css
Is American Idol coming back in 2023?
Chuyển đổi byte thành base64 python
Dự án ip cho lớp 12 trên mysql

Toplist mới

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
7 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
7 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
7 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
7 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
7 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
7 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
7 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
7 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
7 tháng trước

Bài mới nhất

Bài giảng toán lớp 3 giảm đi một số lần năm 2024
Bài tập cỗng đại số vs phương pháp thế năm 2024
Top 5 nữ siêu anh hunh phế nhất marvel năm 2024
Kế hoạch hóa gia đình cu to như quít năm 2024
Bài văn thuyết minh về món sườn xào chua ngọt năm 2024
Bài tập luyện ngữ âm tiếng anh tiểu học năm 2024
Top thực phẩm giúp phát triển chiều cao năm 2024
Lỗi phiên chơi không hợp lệ minecraft trong server properties năm 2024
Độ tuổi phá thai trung bình ở việt nam năm 2024
Lỗi không kết nối tới hipervisor on gns3 năm 2024

Chủ Đề

programming Hỏi Đáp Là gì Mẹo Hay Toplist Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Tiếng anh Top List bao nhieu bao nhiêu hướng dẫn Món Ngon Bài tập So Sánh So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập javascript Thế nào Ở đâu Hướng dẫn Dịch Tại sao Máy tính Đại học