Bộ chọn css là gì và nó hoạt động như thế nào?

Bộ chọn CSS là một trong những phần quan trọng nhất của CSS. Chúng cung cấp cho bạn khả năng nhắm mục tiêu các phần tử HTML trên trang web của bạn mà bạn muốn tạo kiểu

Nếu không có bộ chọn CSS, bạn sẽ không thể định kiểu trang của mình theo cách bạn muốn

Rất may, bộ chọn CSS đã xuất hiện được một thời gian và bạn có thể tạo kiểu cho các thành phần trên trang của mình theo bất kỳ cách nào bạn muốn

Nhưng nếu bạn thực sự muốn mở khóa sức mạnh của CSS và tạo ra các yếu tố tuyệt vời, thì bạn cần hiểu những gì bạn có thể làm với bộ chọn CSS. Cụ thể, bạn cần hiểu các bộ chọn CSS cơ bản trước khi tìm đến các bộ chọn CSS nâng cao

Bài đăng này sẽ xem xét cả hai. Cuối cùng, nó sẽ giúp bạn khám phá sức mạnh của bộ chọn CSS để tạo ra các yếu tố đáng kinh ngạc của riêng bạn. Vì vậy, hãy bắt đầu bằng cách xem bộ chọn CSS là gì

Bộ chọn CSS là gì?

Nếu bạn đã từng viết bất kỳ CSS nào trước đây thì có thể bạn đã thấy bộ chọn CSS. Chúng là phần đầu tiên của quy tắc CSS. Bạn sử dụng bộ chọn CSS để chọn các phần tử HTML mà bạn muốn tạo kiểu

Trong CSS, bộ chọn được xác định bởi đặc tả bộ chọn CSS. Điều này có nghĩa là mỗi bộ chọn phải được trình duyệt hỗ trợ để nó thực sự hoạt động

Bộ chọn CSS có xu hướng được chia thành năm loại khác nhau. Bài đăng này sẽ xem xét chúng theo hai loại chính là cơ bản và nâng cao. Dưới đây là năm loại

  1. bộ chọn đơn giản
  2. bộ chọn tổ hợp
  3. Bộ chọn lớp giả
  4. Bộ chọn phần tử giả
  5. bộ chọn thuộc tính

Để giỏi một thứ gì đó, bạn phải hiểu những điều cơ bản, vì vậy hãy bắt đầu từ đó

Bộ chọn CSS cơ bản

Bạn có thể đã thấy nhiều loại bộ chọn CSS – bộ chọn CSS cơ bản đủ để giúp bạn xây dựng các trang web phong cách. Hãy xem xét từng bộ chọn CSS cơ bản để đảm bảo chúng ta hiểu chức năng của chúng

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

Bộ chọn phần tử CSS chọn các phần tử HTML dựa trên tên phần tử. Trong các tên phần tử HTML là những thứ như

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
1,
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
2 hoặc tên ngữ nghĩa như
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
3 hoặc
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
4. Do đó, bộ chọn phần tử chọn tất cả các phần tử HTML có tên bạn chọn

Hãy xem ví dụ về bộ chọn CSS cho bộ chọn phần tử

/* selecting all h3 elements */
h3 {
	text-align: center;
	color: blue;
}

/* selecting all article elements */
article {
	font-size: 14px;
	line-height: 1.1px;
}

Trong ví dụ trên, chúng tôi đã chọn tất cả các thành phần trên trang thuộc loại

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
5 và
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
3 và áp dụng kiểu cho các thành phần đó

Bộ chọn phần tử giúp bạn giữ cho mã của mình đơn giản bằng cách áp dụng kiểu dáng cho tất cả các phần tử trên một trang thuộc loại đó. Điều này có nghĩa là bạn chỉ phải theo dõi phong cách của mình cho các thành phần đó ở một nơi

Bộ chọn id CSS

Bộ chọn id chọn các thành phần HTML có thuộc tính id phù hợp với bộ chọn. Vì bạn không thể có nhiều phần tử có cùng id trong tài liệu HTML, bộ chọn này cho phép bạn chọn một phần tử riêng lẻ. Điều này có nghĩa là kiểu dáng trên phần tử được chọn sẽ là duy nhất

Để chọn một phần tử có id cụ thể, bạn sử dụng ký tự

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
7 (băm) theo sau là id của phần tử HTML. Trong trường hợp này, nó sẽ giống như thế này
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
8

Hãy xem một ví dụ về bộ chọn CSS cho bộ chọn id

#projects-flex-container {
	width: 90vw;
	display: flex;
}

Trong ví dụ trên, chúng tôi đã chọn phần tử HTML riêng lẻ có id

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
9 và áp dụng kiểu dáng cho phần tử đó. Kiểu dáng này sẽ chỉ áp dụng cho phần tử riêng lẻ đó

Tuy nhiên, một điều cần lưu ý là bạn nên cẩn thận khi sử dụng bộ chọn id. Vì bộ chọn id không thể được sử dụng lại trên các phần tử khác, bạn nên tự hỏi liệu bạn có cần sử dụng bộ chọn id để nhắm mục tiêu phần tử không

Bộ chọn lớp CSS

Bộ chọn lớp chọn các phần tử HTML có thuộc tính lớp khớp với bộ chọn. Bộ chọn lớp rất hữu ích để nhắm mục tiêu nhiều yếu tố, những thứ như thẻ hoặc hình ảnh mà bạn muốn có kiểu phù hợp

Để chọn một phần tử với một lớp cụ thể, bạn sử dụng ký tự

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
10 (dấu chấm) và sau đó nhập tên lớp

Hãy xem một ví dụ về bộ chọn CSS cho bộ chọn lớp

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}

Trong ví dụ trên, chúng tôi đã chọn tất cả các phần tử có tên lớp

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
11 bằng cách sử dụng bộ chọn lớp CSS. Tất cả các phần tử có lớp
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
11 sẽ được áp dụng các kiểu được liệt kê cho chúng

bộ chọn chung

Bộ chọn phổ quát chọn tất cả các phần tử HTML. Điều này có nghĩa là mọi yếu tố trên trang của bạn, từ tiêu đề đến chân trang. Bạn sẽ thường sử dụng nó để làm cho lề và phần đệm của trang nhất quán hoặc để thực hiện những gì được biết là bỏ không

Cú pháp của bộ chọn chung là ký tự

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
13 (dấu sao)

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
1

Trong ví dụ trên, nó đã loại bỏ lề và phần đệm cho toàn bộ trang bằng cách sử dụng bộ chọn chung

Cách nhóm các bộ chọn CSS

Trước khi tìm hiểu các bộ chọn CSS nâng cao, chúng ta cần xem nhanh các bộ chọn CSS nhóm. Đây là một thực tế phổ biến mà bạn sẽ thấy trong tự nhiên và nó giúp làm cho mã của bạn rõ ràng và dễ đọc

Nhóm cho phép bạn chọn nhiều phần tử HTML cùng một lúc và chỉ nêu định nghĩa kiểu của chúng một lần

Hãy xem một ví dụ về bộ chọn nhóm để giải thích

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
7

Trong mã CSS ở trên, chúng ta có ba phần tử

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
1,
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
15 và
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
5 và mỗi phần tử này có định nghĩa kiểu giống nhau. Kết quả là chúng ta có thể làm sạch mã của mình bằng cách nhóm các bộ chọn

Để nhóm các bộ chọn, chúng tôi tách từng bộ chọn bằng ký tự

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
17 (dấu phẩy)

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
2

Bởi vì định nghĩa phong cách của họ là như nhau, bây giờ chúng ta chỉ phải viết nó một lần

Lưu ý rằng các bộ chọn nhóm có thể được sử dụng cho tất cả các bộ chọn được đề cập trong bài viết này, nghĩa là các bộ chọn không nhất thiết phải khớp với nhau

Chúng tôi có thể nhóm bộ chọn lớp với bộ chọn id nếu chúng tôi muốn chúng chia sẻ định nghĩa kiểu. Và chúng ta có thể nhóm các thuộc tính style và các giá trị phù hợp và sau đó xác định các định nghĩa khác nhau trên từng phần tử

Hãy mở rộng ví dụ của chúng tôi để hiểu khái niệm này

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
3

Bạn đã có nó, đây là tất cả các bộ chọn CSS cơ bản. Nếu bạn muốn giỏi CSS, bạn cần hiểu mỗi thứ này làm gì. Với kiến ​​thức đã có, bây giờ bạn đã sẵn sàng để làm điều đó

Nếu bạn muốn nâng cấp CSS của mình, thì bạn sẽ muốn hiểu các bộ chọn CSS nâng cao

Bộ chọn CSS nâng cao

Bộ chọn CSS nâng cao cho phép bạn mở rộng ranh giới của CSS. Chúng giúp bạn có được những yếu tố cụ thể mà bạn muốn nhắm mục tiêu và trạng thái của yếu tố đó khi nhắm mục tiêu nó

Hãy đi thẳng vào một số bộ chọn CSS nâng cao bằng cách xem các bộ chọn thuộc tính

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

Bộ chọn thuộc tính cho phép bạn chọn các phần tử dựa trên việc có hay không một thuộc tính nhất định. Nói cách khác, bộ chọn CSS này sẽ khớp với bất kỳ phần tử nào trên trang của bạn nếu phần tử đó có một thuộc tính nhất định

Thuộc tính là nội dung được thêm vào thẻ mở của phần tử HTML. Nó có thể là những thứ như

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
18,
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
19 hoặc
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
70

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
7Tiêu đề là một thuộc tính của phần tử a

Có bảy bộ chọn thuộc tính, mỗi bộ chọn cho phép bạn tìm các phần tử dựa trên việc có thuộc tính hay không và giá trị có thể chứa gì

  1. bộ chọn hiện tại
  2. Bộ chọn bằng (
    .project-card {
    	color: #badA55;
    	padding: 5px;
    	border-radius: 5px;
    }
    
    71)
  3. Bắt đầu với bộ chọn (
    .project-card {
    	color: #badA55;
    	padding: 5px;
    	border-radius: 5px;
    }
    
    72)
  4. Kết thúc bằng bộ chọn (
    .project-card {
    	color: #badA55;
    	padding: 5px;
    	border-radius: 5px;
    }
    
    73)
  5. Chứa bộ chọn (
    .project-card {
    	color: #badA55;
    	padding: 5px;
    	border-radius: 5px;
    }
    
    13)
  6. Bộ chọn khoảng trắng (
    .project-card {
    	color: #badA55;
    	padding: 5px;
    	border-radius: 5px;
    }
    
    75)
  7. Bộ chọn dấu gạch nối (________ 176)

Cú pháp phổ biến cho các bộ chọn này là bộ chọn theo sau bởi

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
77 (dấu ngoặc vuông) trong đó bạn nêu rõ những gì bạn đang tìm kiếm. Bộ chọn có thể là bất kỳ thứ gì như bộ chọn lớp hoặc thậm chí là bộ chọn phổ quát

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
5

Hôm nay chúng ta sẽ xem xét năm bộ chọn thuộc tính phổ biến nhất. Để hiểu năm bộ chọn thuộc tính này, hãy xem xét từng bộ chọn trong số chúng bằng các ví dụ

Bộ chọn thuộc tính hiện tại

Bộ chọn thuộc tính này tìm bất kỳ phần tử nào dựa trên vị trí chứa thuộc tính

Hãy xem một ví dụ về bộ chọn hiện tại để giải thích

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
6

Trong ví dụ trên, bộ chọn hiện tại của chúng ta sẽ tìm bất kỳ phần tử

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
78 nào có thuộc tính
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
79 và áp dụng định nghĩa kiểu cho chúng. Tất cả các phần tử
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
78 khác không có thuộc tính tiêu đề sẽ không được tạo kiểu như trên

Bộ chọn thuộc tính bằng

Bộ chọn thuộc tính này tìm một phần tử có giá trị thuộc tính khớp chính xác. Để sử dụng bộ chọn này, bạn nhập tên thuộc tính theo sau là

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
71 (bằng) để tìm giá trị khớp chính xác

Hãy xem một ví dụ về bộ chọn bằng để giải thích

#projects-flex-container {
	width: 90vw;
	display: flex;
}
0

Trong ví dụ trên, bộ chọn bằng sẽ tìm bất kỳ phần tử

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
78 nào có thuộc tính
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
23 với giá trị chính xác là "https. //peterlunch. com/"

Bắt đầu với bộ chọn thuộc tính

Bộ chọn thuộc tính này tìm bất kỳ phần tử nào bắt đầu bằng một giá trị mà bạn chỉ định. Để sử dụng bộ chọn này, bạn nêu rõ thuộc tính mà bạn đang tìm kiếm, theo sau là các ký tự

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
72 và
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
71, sau đó là giá trị mà bạn muốn khớp

Hãy xem một ví dụ về bộ chọn started with để giải thích

#projects-flex-container {
	width: 90vw;
	display: flex;
}
1

Trong ví dụ trên, bộ chọn started with tìm bất kỳ phần tử

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
78 nào có thuộc tính
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
23 và bắt đầu bằng "https"

Kết thúc với bộ chọn thuộc tính

Giống như bộ chọn bắt đầu bằng, bộ chọn thuộc tính này làm ngược lại và tìm bất kỳ phần tử nào kết thúc bằng giá trị bạn chỉ định

Để sử dụng bộ chọn này, bạn nêu rõ thuộc tính mà bạn đang tìm kiếm, theo sau là các ký tự

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
73 và
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
71, sau đó là giá trị mà bạn muốn khớp

Hãy xem một ví dụ về bộ chọn kết thúc bằng để giải thích

#projects-flex-container {
	width: 90vw;
	display: flex;
}
2

Trong ví dụ trên, bộ chọn kết thúc bằng tìm bất kỳ phần tử

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
30 nào có kết thúc
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
31 bằng "/blog-imgs". Đây là một trong những tôi thực sự sử dụng cho trang web của tôi

Chứa bộ chọn thuộc tính

Bộ chọn thuộc tính này tìm thấy bất kỳ phần tử nào chứa giá trị bạn đang tìm kiếm ở đâu đó trong giá trị thuộc tính. Điều này có nghĩa là giá trị phải chứa ít nhất một lần xuất hiện của giá trị

Để sử dụng bộ chọn này, bạn nêu thuộc tính mà bạn đang tìm kiếm, theo sau là các ký tự

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
13 và
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
71, sau đó là giá trị bạn đang tìm kiếm một lần xuất hiện của

Hãy xem một ví dụ về bộ chọn chứa để giải thích

#projects-flex-container {
	width: 90vw;
	display: flex;
}
3

Trong ví dụ trên, bộ chọn thuộc tính chứa tìm thấy bất kỳ phần tử

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
78 nào có
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
23 chứa giá trị "peterlunch"

Đó là bộ chọn thuộc tính, hãy chuyển sang bộ chọn CSS nâng cao tiếp theo

bộ chọn kết hợp

Bộ chọn CSS nâng cao tiếp theo là bộ chọn kết hợp. Các bộ chọn này có thể kết hợp nhiều bộ chọn CSS. Có bốn loại bộ chọn kết hợp trong CSS

  1. Bộ chọn hậu duệ
  2. bộ chọn con
  3. Bộ chọn anh chị em liền kề
  4. Bộ chọn anh chị em chung

Để hiểu cách thức hoạt động của các bộ chọn này, trước tiên bạn phải hiểu rằng HTML tuân theo hệ thống phân cấp cây gia đình. Điều này có nghĩa là có một phần tử cha có thể chứa phần tử con và phần tử con có thể có phần tử con, v.v.

#projects-flex-container {
	width: 90vw;
	display: flex;
}
4

Trong ví dụ trên,

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
36 là cha, các phần tử con của nó là các phần tử
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
3 và các mạo từ là cha của các phần tử con
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
1 và
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
2

Với kiến ​​thức đó, chúng ta hãy lần lượt khám phá từng bộ chọn kết hợp này với các ví dụ để hiểu cách chúng hoạt động

Bộ chọn kết hợp con cháu

Bộ chọn kết hợp hậu duệ khớp với tất cả các phần tử là hậu duệ của một phần tử đã chỉ định

Hãy xem xét một ví dụ về sự kết hợp hậu duệ để giải thích

#projects-flex-container {
	width: 90vw;
	display: flex;
}
5

Ví dụ trên chọn tất cả các phần tử

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
2 bên trong các phần tử
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
36

Bộ chọn kết hợp con

Bộ chọn kết hợp con khớp với tất cả các phần tử là phần tử con của một phần tử cụ thể. Điều này khác với bộ chọn kết hợp con cháu, vì nó chỉ chọn phần tử con trực tiếp của phần tử cha

Bộ chọn con được biểu thị bằng ký tự

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
72

Hãy xem một ví dụ về bộ chọn kết hợp con để giải thích

#projects-flex-container {
	width: 90vw;
	display: flex;
}
6

Đề cập đến ví dụ phân cấp HTML của chúng tôi ở trên, bộ chọn này sẽ chỉ tìm thấy thẻ

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
2 đầu tiên chứ không phải thẻ
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
2 trong thẻ
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
3. Nó thực hiện điều này vì chúng không phải là con trực tiếp của phần tử cha mẹ
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
36

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

Các bộ chọn Anh chị em liền kề được biểu thị bằng cách sử dụng

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
77 phân tách hai bộ chọn và chỉ khớp với phần tử bộ chọn thứ hai nếu nó ngay sau phần tử đầu tiên

Một ví dụ điển hình trong thế giới thực về điều này là có văn bản ngay sau một hình ảnh được tạo kiểu giống như chú thích

#projects-flex-container {
	width: 90vw;
	display: flex;
}
7

Trong ví dụ trên, bất kỳ phần tử

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
2 nào theo sau hình ảnh sẽ được tạo kiểu theo định nghĩa trên

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

Bộ chọn anh chị em chung chọn bất kỳ phần tử nào là anh chị em của một phần tử. Bộ chọn anh chị em chung được biểu thị bằng ký tự

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
75

Hãy xem xét một ví dụ về bộ chọn anh chị em chung để giải thích

#projects-flex-container {
	width: 90vw;
	display: flex;
}
8

Trong ví dụ trên, nó chọn tất cả các phần tử

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
1 là anh chị em của các phần tử
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
3

bộ chọn giả

Bộ chọn giả rơi vào hai nhóm. Đầu tiên là bộ chọn lớp giả và thứ hai là bộ chọn phần tử giả

Các bộ chọn này rất phức tạp và có nhiều tùy chọn. Để hiểu chúng, bạn nên đọc một số bài viết riêng về chúng vì bản thân chúng là những chủ đề phức tạp. Nhưng, tôi sẽ chạm nhẹ vào cả hai ở đây

Đầu tiên 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ạn có thể đã thấy những thứ như

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
52 hoặc
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
53. Đây là những trạng thái của các yếu tố trên trang của bạn. Bạn có thể chọn các phần tử dựa trên việc phần tử đó có ở trạng thái được chỉ định hay không

Một ví dụ nhanh sẽ là

#projects-flex-container {
	width: 90vw;
	display: flex;
}
9

Trong ví dụ trên, khi người dùng di chuột qua một nút, màu nền sẽ chuyển sang màu đỏ

Nếu bạn muốn hiểu rõ hơn về bộ chọn lớp giả, tôi khuyến khích bạn đọc bài đăng này của Nash Vail, người đã giải thích chúng rất tuyệt vời

Tiếp theo là bộ chọn phần tử giả mà tôi đã viết ở đây. Các bộ chọn này chọn các phần của một phần tử. Một phần của phần tử có thể là chữ cái đầu tiên của phần tử hoặc nội dung trước và sau phần tử

Với bộ chọn phần tử giả, điều quan trọng cần lưu ý là chúng sử dụng

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
54 (dấu hai chấm) so với.
.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
55 (dấu hai chấm đơn) như các lớp giả

.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}
0

Bản tóm tắt

Bây giờ bạn đã hiểu rõ về bộ chọn CSS và cách bạn có thể sử dụng chúng để tìm các thành phần HTML trên trang web của mình

Tôi hy vọng bạn thích đọc bài viết này. Nếu bạn đã học được điều gì đó từ bài đăng này thì hãy xem phần còn lại của các bài đăng của tôi tại đây hoặc đăng ký nhận bản tin của tôi để nhận nội dung dành cho người mới cực kỳ hay và siêu độc quyền

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


Bộ chọn css là gì và nó hoạt động như thế nào?
Peter Lynch

Tôi là nhà phát triển web người Úc. Tôi hiện đang làm việc ở một số công việc phụ trên con đường trở thành một nhà phát triển và hacker độc lập giỏi hơn


Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơ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

Ví dụ về bộ chọn phần tử CSS là gì?

Bộ chọn cơ bản . * sẽ khớp với tất cả các thành phần của tài liệu . Chọn tất cả các phần tử có tên nút đã cho. Thí dụ. đầu vào sẽ khớp với bất kỳ phần tử

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

Có một số loại bộ chọn khác nhau trong CSS. .
Bộ chọn phần tử CSS
Bộ chọn Id CSS
Bộ chọn lớp CSS
Bộ chọn chung CSS
Bộ chọn nhóm CSS

Bộ chọn HTML hoạt động như thế nào?

Bộ chọn loại chọn tất cả các phần tử HTML có tên nút đã cho . Ví dụ: “a” sẽ chọn tất cả các phần tử

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

Bộ chọn loại, bộ chọn phổ quát, bộ chọn thuộc tính, bộ chọn lớp, bộ chọn ID hoặc lớp giả là một bộ chọn đơn giản