Biết cách sử dụng CSS Selector [hay còn gọi là CSS Selector] là một kỹ năng bắt buộc của giao diện người dùng của lập trình viên
Bộ chọn CSS là gì?
CSS Selector đơn giản là thứ cho phép bạn nhắm mục tiêu tới các phần tử HTML để áp dụng các thuộc tính CSS cho chúng
Bộ chọn CSS giống như đường dẫn, chỉ định để CSS biết bạn đang muốn điều chỉnh, tạo kiểu cho phần tử HTML nào vậy
Đây là file HTML và file CSS. Và bạn sẽ viết CSS để chỉnh sửa, tạo kiểu cho phần tử HTML
Bộ chọn CSS trong tệp CSS
Qua bài viết này, bạn sẽ được khám phá về 8 Loại CSS Selector phổ biến nhất
Chỉ với 8 Bộ chọn CSS này mình tin rằng bạn còn biết nhiều hơn một lập trình viên Frontend chuyên nghiệp
Tại sao bạn cần biết 8 CSS Selector này?
8 Type CSS Selector Phổ biến nhất
Mặc dù có rất nhiều CSS Selector khác, nhưng mình thấy chúng thiếu tổ chức, thiếu ví dụ hoặc có quá nhiều thông tin
Đó là lý do tại sao mình nhóm CSS Selector này thành 8 loại chung
Khi bắt đầu tìm hiểu về từng nhóm, bạn sẽ thấy có một đoạn mã HTML
Hãy sử dụng đoạn mã HTML đó để thử nghiệm loại CSS Selector được giới thiệu trong nhóm
Lưu ý. Danh sách này không đầy đủ và nó vẫn tiếp tục được cập nhật
Nhưng về cơ bản, nó sẽ đáp ứng hầu hết các nhu cầu sử dụng CSS Selector của bạn
lục mục
1. Bộ chọn CSS cơ bản
Bộ chọn CSS cơ bản [Basic CSS Selector] sử dụng chọn phần tử / lớp / id
Chúng được sử dụng thường xuyên nhất và dễ nhớ nhất
Như đã nói từ trước, đây là code HTML dùng để bạn chơi với Basic CSS Selector
Mã HTML
Hello
Hola
I am left behind...
- Bộ chọn phần tử.
8. Nó chọn bất kỳ phần tử nào* { color: yellow; }
p { color: blue; }
div { color: magenta; }
- Bộ chọn lớp.
9. Nó chọn tất cả các phần tử có* { color: yellow; }
0 đã chọnHola World
Hello World
Hello Again World
.hello {
color: red;
}
- Bộ chọn ID.
1. Nó chọn tất cả các phần tử cóHola World
Hello World
Hello Again World
2 đã chọnHola World
Hello World
Hello Again World
- bộ chọn chung.
3. Nó chọn tất cả các phần tửHola World
Hello World
Hello Again World
* {
color: yellow;
}
> Lưu ý. Trước khi chuyển sang phần tiếp theo. Hãy nhớ rằng đang thực hiện việc sử dụng CSS Selector đã được giới thiệu để thử nghiệm với mã HTML ở trên xem có thành công không bạn nhé.
And CSS Dinner là một trò chơi rất thú vị để bạn luyện tập sử dụng CSS Selector. Medium học lý thuyết về Selector [bên dưới đây] và dùng nó để vượt qua 32 Level này nhé
Học CSS Selector qua Game CSS Diner
> Tham khảo ngay các từ khóa học dưới đây để nhanh chóng làm chủ bộ kỹ năng lập trình Web. Học với giảng viên doanh nghiệp. Hỗ trợ công việc làm cuối khóa
2. Bộ chọn CSS hậu duệ
Đây là CSS Selector để chọn phần hậu duệ của bất kỳ phần tử nào
Mã HTML
Hola World
Hello World
Hello Again World
- Bất kỳ bộ chọn con cháu nào.
4. Chọn bất kỳ phần tử B nào là hậu duệ của A. Hậu duệ có thể được lồng rất sâuHola World
Hello World
Hello Again World
* {
color: yellow;
}
3
Chúng ta có thể kết hợp với
Hola World
Hello World
Hello Again World
3 để chọn tất cả các phần tử hậu duệ* {
color: yellow;
}
5Bộ chọn CSS trên mọi phần tử bên trong được chọn trong
Hola World
Hello World
Hello Again World
6bộ chọn con.
Hola World
Hello World
Hello Again World
7. Không giống với Any Descendant CSS Selector, CSS Selector này chỉ chọn hậu duệ trực tiếpTry test with CSS as after to view results nhé
* {
color: yellow;
}
8Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì lớp
Hola World
Hello World
Hello Again World
8 trong HTML này không phải là hậu duệ trực tiếpp { color: blue; }
div { color: magenta; }
03. Nhiều bộ chọn CSS
Multiple CSS Selector cho phép chúng ta chọn nhiều phần tử không liên quan với nhau
Mã HTML
p { color: blue; }
div { color: magenta; }
0- Nhiều bộ chọn CSS.
9. To select many element / class / idHola World
Hello World
Hello Again World
p { color: blue; }
div { color: magenta; }
14. Bộ chọn CSS kết hợp
Bộ chọn CSS kết hợp cho phép bạn chọn thành phần rất cụ thể bằng nhiều tham chiếu
Trường hợp sử dụng biến phổ biến nhất là nút hiệu ứng làm nổi bật khi được di chuột [di chuột] / nhấp [nhấp] bằng cách cung cấp cho chúng một lớp
* {
color: yellow;
}
30Mã HTML
p { color: blue; }
div { color: magenta; }
2- Bộ chọn CSS kết hợp.
31. Cho phép chọn phần tử bao gồm cả A và B. Cú pháp trông giống như Descendant CSS Selector, ngoại trừ phần này không có khoảng trắng* { color: yellow; }
p { color: blue; }
div { color: magenta; }
3Chúng ta có thể kết hợp nhiều thứ, không phải chỉ có lớp. [Nhớ là để chúng ta sát nhau]
p { color: blue; }
div { color: magenta; }
45. Bộ chọn CSS anh chị em
Sibling CSS Selector nhắm chọn các thành phần anh chị em
Mã HTML
p { color: blue; }
div { color: magenta; }
0- Bộ chọn Anh/Chị/Em liền kề [Nghiêm cấm].
32. Nhắm mục tiêu một phần tử anh chị em được đặt ngay sau phần tử đó* { color: yellow; }
p { color: blue; }
div { color: magenta; }
6Lưu ý rằng CSS bên dưới sẽ không hoạt động vì lớp
* {
color: yellow;
}
33, mặc dù đó là anh chị em của * {
color: yellow;
}
34, nhưng nó cách * {
color: yellow;
}
34 2 phần tửp { color: blue; }
div { color: magenta; }
7- Bộ chọn Anh/Chị/Em liền kề [Không nghiêm cấm].
36. Giống như bộ chọn bên trên nhưng không giới hạn 1 phần tử đầu tiên* { color: yellow; }
p { color: blue; }
div { color: magenta; }
8Bạn thấy không, nó chọn cả thẻ
* {
color: yellow;
}
37 ở bên dưới vì chúng là thành phần anh chị em với nhau và có lớp là
Hola World
Hello World
Hello Again World
8Lưu ý. This selector not active back
The should CSS side not active
p { color: blue; }
div { color: magenta; }
96. Bộ chọn CSS giả
Mã HTML
.hello {
color: red;
}
0- Select the first section.
39. It select to the first element con. [* { color: yellow; }
50 phải có cha mẹ]* { color: yellow; }
.hello {
color: red;
}
1You try to view. Target target
* {
color: yellow;
}
51 has not public?.hello {
color: red;
}
2không có gì xảy ra
Điều này được mặc định là dù
* {
color: yellow;
}
52 có cha mẹ [div with class * {
color: yellow;
}
53], nhưng * {
color: yellow;
}
52 không phải là con đầu tiên [nó là con thứ 3]CSS dưới đây sẽ hoạt động vì
Hola World
Hello World
Hello Again World
6 là con đầu tiên của * {
color: yellow;
}
53.hello {
color: red;
}
3- Select the end of the end section. Một. con cuối cùng. Activity as
39, NGOẠI LỆ thay vì chọn phần tử con đầu tiên, nó chọn phần tử con cuối cùng* { color: yellow; }
.hello {
color: red;
}
4- Chỉ chọn phần tử con. Một. con một. Select all A is con duy nhất của cha mẹ nó. Tương tự như bộ chọn phần tử con đầu tiên [_______139] và phần tử con cuối cùng [
59]. Tiêu đề ngoại trừ không được có anh chị em nào* { color: yellow; }
.hello {
color: red;
}
5Lưu ý mặc dù chúng ta có một số phần tử
* {
color: yellow;
}
37, chỉ phần tử cuối cùng được áp dụng vì các phần tử * {
color: yellow;
}
37 khác không phải là phần tử con duy nhất của cha mẹ chúngNói cách khác, phần tử con có anh chị em thì không áp dụng được
- Conction section con thứ N.
82. Nó chọn từng mục tiêu là con thứ* { color: yellow; }
83 của cha mẹ nó* { color: yellow; }
.hello {
color: red;
}
6Please try with phần tử
* {
color: yellow;
}
37.hello {
color: red;
}
7You can see at sao hai phần tử
* {
color: yellow;
}
37 thay đổi màu sắc?- The select con last N.
86. Nó tương tự như bộ chọn con thứ N, ngoại trừ nó được tính từ cuối cùng* { color: yellow; }
.hello {
color: red;
}
8- Không chọn.
87. Chọn tất cả các phần tử A mà không phải B* { color: yellow; }
.hello {
color: red;
}
9- First select type.
88. Nó chọn phần tử đầu tiên thuộc loại này trong số các phần tử của anh chị em của nó* { color: yellow; }
Nghe có vẻ tương tự
* {
color: yellow;
}
89 nhỉ?But not must be
Để cảm nhận sự khác biệt của nó, hãy thử nghịch nó xem sao
#app {
color: red;
}
0Được rồi, đó không phải là một ví dụ hay vì nó cho thấy kết quả tương tự như
p { color: blue; }
div { color: magenta; }
00 😅Hãy làm một ví dụ khác
#app {
color: red;
}
1Cái này thì tốt hơn
So sánh với
p { color: blue; }
div { color: magenta; }
01. Bạn sẽ thấy rằng * {
color: yellow;
}
37 ở giữa chuyển sang màu đỏ khi sử dụng p { color: blue; }
div { color: magenta; }
03Điều này là do
* {
color: yellow;
}
37 ở giữa là loại phần tử * {
color: yellow;
}
37 đầu tiên trong số các anh chị em của nó- The last select type.
06. Giống như trên, nhưng ngược lạip { color: blue; } div { color: magenta; }
#app {
color: red;
}
2- Selected type thứ N.
07. Cũng giống như hai bộ chọn trên, nhưng nó chọn phần tử thứ Np { color: blue; } div { color: magenta; }
#app {
color: red;
}
3Please try with other section
#app {
color: red;
}
4Nếu chúng ta thay đổi nó thành
p { color: blue; }
div { color: magenta; }
08, thì nó hoạt động giống như p { color: blue; }
div { color: magenta; }
09Ngoài ra nếu chúng ta thay đổi nó thành
p { color: blue; }
div { color: magenta; }
00, không có gì thay đổi. Đây là do không có phần tử * {
color: yellow;
}
37 thứ 4 trong số các anh chị em- Bộ chọn Chỉ loại.
02. Chọn phần tử chỉ có loại đó, không có Anh/Chị/Emp { color: blue; } div { color: magenta; }
#app {
color: red;
}
5Chú ý, chúng ta có hai phần tử
* {
color: yellow;
}
37 đổi màuĐiều này là do có hai phần tử
* {
color: yellow;
}
37 đây không có Anh / Chị / Em cùng loại7. Bộ chọn giả [liên kết và đầu vào]
Dưới đây là danh sách các bộ chọn pesudo khác. Chúng thường được liên kết với các liên kết [
p { color: blue; }
div { color: magenta; }
05] [mặc dù chúng có thể hoạt động với các phần tử không liên kết p { color: blue; }
div { color: magenta; }
06]Mã HTML
#app {
color: red;
}
6- Bộ chọn di chuột.
07. Chọn phần tử được di chuột. Thường được sử dụng để làm nổi các liên kếtp { color: blue; } div { color: magenta; }
#app {
color: red;
}
7Not only active with thẻ
p { color: blue; }
div { color: magenta; }
05. This option active with all second#app {
color: red;
}
8- Bộ chọn lấy nét.
09. Chọn phần tử bạn đang tập trung vào nó. Thường được sử dụng vớip { color: blue; } div { color: magenta; }
10p { color: blue; } div { color: magenta; }
#app {
color: red;
}
9- Bộ chọn hoạt động.
11. Chọn phần tử đang có trạng thái hoạt độngp { color: blue; } div { color: magenta; }
* {
color: yellow;
}
0Lưu ý khi bạn nhấp vào nó, nền [nền] sẽ thay đổi
- Bộ chọn liên kết.
12. Nó chọn tất cả các liên kết chưa được nhấpp { color: blue; } div { color: magenta; }
* {
color: yellow;
}
18. Bộ chọn CSS thuộc tính
Bộ chọn thuộc tính CSS [Attribute CSS Selector] được sử dụng để chọn thuộc tính HTML [HTML Attributes]
Mã HTML
* {
color: yellow;
}
2- Cơ bản tùy chọn thuộc tính.
13. Chọn tất cả các phần tửp { color: blue; } div { color: magenta; }
50 có thuộc tính* { color: yellow; }
15p { color: blue; } div { color: magenta; }
* {
color: yellow;
}
3- The select tool tool.
16. Chọn các phần tửp { color: blue; } div { color: magenta; }
50 có thuộc tính* { color: yellow; }
15 với giá trị làp { color: blue; } div { color: magenta; }
19p { color: blue; } div { color: magenta; }
* {
color: yellow;
}
4- Bộ tùy chọn thuộc tính cụ thể [Bắt đầu với. ].
20. Chọn tất cả các phần tửp { color: blue; } div { color: magenta; }
50 có thuộc tính* { color: yellow; }
15 với giá trị bắt đầu làp { color: blue; } div { color: magenta; }
19. Ký tựp { color: blue; } div { color: magenta; }
24 là ký tự có thể hiện chuỗi bắt đầu [trong Biểu thức chính quy [Regex]].p { color: blue; } div { color: magenta; }
* {
color: yellow;
}
5- Bộ tùy chọn thuộc tính cụ thể [Kết thúc với. ].
25. Chọn tất cả các phần tửp { color: blue; } div { color: magenta; }
50 có thuộc tính* { color: yellow; }
15 với giá trị kết thúc làp { color: blue; } div { color: magenta; }
19. Ký tựp { color: blue; } div { color: magenta; }
29 là ký tự có thể hiển thị kết thúc chuỗi trong [Biểu thức chính thức [Regex]]p { color: blue; } div { color: magenta; }
* {
color: yellow;
}
6- Bộ chọn thuộc tính cụ thể [Chữ ký tự. ].
30. Chọn tất cả các phần tửp { color: blue; } div { color: magenta; }
50 với thuộc tính* { color: yellow; }
15 có chứa giá trịp { color: blue; } div { color: magenta; }
19p { color: blue; } div { color: magenta; }
* {
color: yellow;
}
7Ok, đến đây, mình rất tiếc phải xin lỗi rằng
Bạn đã biết quá nhiều về CSS Selector
Tôi đã biết quá nhiều về CSS Selector
Với 8 Bộ CSS Selector này mình tin rằng đáp ứng đầy đủ cho bạn trong quá trình lập trình web/app
Thậm chí, với các nguyên tắc viết CSS mang lại hiệu suất tốt như Nguyên tắc Độ đặc hiệu thấp thì
- Nên sử dụng Bộ chọn CSS cùng một mức độ đặc hiệu [ví dụ như là
9]* { color: yellow; }
- Và đặt tên lớp theo nguyên tắc BEM để quản lý
- Bộ chọn CSS càng sâu, càng cụ thể càng làm giảm hiệu suất
Vì thế,
Bạn chỉ cần hiểu Bộ chọn CSS là gì và ghi nhớ một số Bộ chọn CSS phổ biến ở trên là quá đủ
Nếu thấy hay thì hãy Chia sẻ và Đánh dấu lại để đọc kĩ hơn bạn nhé
Tham khảo
https. //www. w3schools. com/cssref/css_selectors. asp
https. //hướng dẫn. freecodecamp. org/css/tutorials/css-selectors-cheat-sheet/
https. // nhà phát triển. mozilla. org/en-US/docs/Web/CSS/CSS_Selectors
HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI
Học lập trình chất lượng cao [Từ năm 2002]. Học thực tế + Tuyển dụng ngay
Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT. 02435574074 - 0383. 180086
E-mail. xin chào@niithanoi. giáo dục. vn
trang chủ. https. //Facebook. com/NIIT. CNTT/
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #php #java #python