Bộ chọn CSS chọn các phần tử mà bạn có thể áp dụng kiểu. Bộ chọn cơ bản nhất là bộ chọn phần tử, chọn một phần tử theo tên của nó. Các bộ chọn khác bao gồm bộ chọn id, lớp, phổ quát và con cháu.

Bộ chọn là một trong hai phần của bất kỳ câu lệnh CSS nào. Bộ chọn được sử dụng để nhắm mục tiêu các phần tử trên trang HTML cho một kiểu nhất định.

Có một loạt các bộ chọn CSS có thể được sử dụng để nhắm mục tiêu chính xác các phần tử trên trang web và cho phép bạn tùy chỉnh ở mức độ cao khi bạn đang thiết kế.

Hướng dẫn này sẽ khám phá những điều cơ bản về bộ chọn trong CSS cách bạn có thể tận dụng các bộ chọn được sử dụng phổ biến nhất trong mã của mình.

Bộ chọn CSS

Bộ chọn CSS xác định các phần tử HTML mà bạn muốn áp dụng kiểu CSS. Người chọn có thể chọn các phần tử dựa trên tên, ID, lớp và các thuộc tính khác của chúng. Các bộ chọn xuất hiện trước một cặp dấu ngoặc trong quy tắc CSS.

Trong CSS, các quy tắc được sử dụng để xác định các kiểu sẽ áp dụng cho một phần tử hoặc một loạt các phần tử. Quy tắc có hai thành phần:bộ chọn và khai báo.

Đây là một ví dụ về quy tắc trong CSS:

h1 {
	color: pink;
}

Quy tắc CSS này đặt màu của tất cả các phần tử h1 trên trang web thành màu hồng. Hai thành phần của quy tắc của chúng tôi là:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

• h1 , là yếu tố mà phong cách của chúng tôi được áp dụng. Đây được gọi là bộ chọn.
• màu:hồng , là kiểu được áp dụng cho các phần tử trong bộ chọn của chúng tôi. Đây được gọi là một khai báo. Trong ví dụ này, chúng tôi thay đổi màu của tất cả các phần tử h1 thành màu hồng.

Bộ chọn CSS là một phần cơ bản của việc thiết kế các kiểu web. Các bộ chọn cho phép bạn cho trình duyệt biết các phần tử nào nên sử dụng một kiểu cụ thể. Ví dụ:bạn có thể có một bộ chọn hướng dẫn trình duyệt tạo kiểu cho tất cả

phần tử hoặc tất cả

trên một trang web.

Các loại bộ chọn CSS

CSS cung cấp một loạt các bộ chọn. Hãy để chúng tôi khám phá một ví dụ về các bộ chọn chính mà bạn có thể gặp phải khi thiết kế các quy tắc CSS.

Bộ chọn dựa trên yếu tố CSS

Bộ chọn dựa trên phần tử cho phép bạn áp dụng một kiểu cho tất cả các trường hợp của một phần tử trong tài liệu tương ứng với một quy tắc. Ví dụ:bạn có thể sử dụng bộ chọn phần tử để áp dụng một kiểu cho tất cả

trên một trang.

Giả sử chúng ta muốn thay đổi màu của tất cả văn bản dựa trên đoạn văn trên một trang web thành màu xám. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

p {
	color: gray;
}

Các khai báo bên trong bộ chọn “p” của chúng tôi sẽ được áp dụng cho mọi đoạn văn (HTML

) trên trang web của chúng tôi.

Bộ chọn id CSS

Bộ chọn id CSS chọn một phần tử HTML trên một trang dựa trên ID của nó. Các ID HTML là duy nhất nên bộ chọn id được sử dụng để áp dụng các kiểu cho một phần tử duy nhất trên trang web. Cú pháp cho bộ chọn ID là một dấu thăng theo sau là ID phần tử.

Giả sử chúng ta muốn đặt giá trị của thuộc tính CSS height của một phần tử có tên là “box9” trên trang của chúng ta thành 150px. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

#box9 {
	height: 150px;
}

Quy tắc này sẽ đặt chiều cao của phần tử có id “box9” thành 150px.

Bộ chọn lớp CSS

Bộ chọn lớp CSS tìm các phần tử có thuộc tính lớp cụ thể. Cú pháp của bộ chọn lớp là dấu chấm (.) Và sau đó là tên của lớp bạn muốn chọn.

Vì vậy, nếu bạn muốn nhắm mục tiêu lớp “boxMiddle”, bạn sẽ sử dụng bộ chọn “.boxMiddle”.

Hãy để chúng tôi nói rằng chúng tôi đang thiết kế một hộp trên trang web của chúng tôi. Hộp phải có màu nền hồng. Hộp của chúng ta đã được gán lớp “pinkBox”, lớp này chúng ta có thể áp dụng các kiểu của mình. Đây là mã chúng tôi sẽ sử dụng để đặt màu của các phần tử có lớp pinkBox thành màu hồng:

.pinkBox {
	color: pink;
}

Mọi phần tử trên trang web có lớp “pinkBox” sẽ được đặt thành màu hồng.

Ngoài ra, bạn cũng có thể chỉ định rằng chỉ các phần tử cụ thể với một lớp cụ thể mới bị ảnh hưởng bởi một kiểu. Bằng cách chỉ sử dụng một bộ chọn lớp, mọi phần tử có một lớp cụ thể sẽ bị ảnh hưởng bởi kiểu bạn xác định.

Nếu chúng ta sử dụng một bộ chọn lớp đứng trước một kiểu phần tử, chúng ta có thể chỉ áp dụng một kiểu cho các phần tử cụ thể với một lớp nhất định. Giả sử chúng ta muốn màu nền của mọi HTML

div.pinkBox {
	color: pink;
}

* {
	text-align: center;
}

li a {
	background-color: yellow;
}

h2 {
	text-align: center;
}

.alignCenter {
	text-align: center;
}

h2, .alignCenter {
	text-align: center;
}

h1 {
	text-align: center;
	font-size: 32px;
	font-weight: normal;
}

h2 {
	text-align: center;
	font-size: 24px;
	font-weight: normal;
}

h3 {
	text-align: center;
	font-size 18px;
	font-weight: normal;
}

h1, h2, h3 {
	text-align: center;
	font-weight: normal;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}