Css hoạt động không hoạt động

Question

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ì?

Nội dung chính Show

Tại sao bạn cần biết 8 CSS Selector này?
1. Bộ chọn CSS cơ bản
2. Bộ chọn CSS hậu duệ
3. Nhiều bộ chọn CSS
4. Bộ chọn CSS kết hợp
5. Bộ chọn CSS anh chị em
6. Bộ chọn CSS giả
7. Bộ chọn giả (liên kết và đầu vào)
8. Bộ chọn CSS thuộc tính
Bạn đã biết quá nhiều về CSS Selector

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ử.
```
* {
  color: yellow;
}
```
8. Nó chọn bất kỳ phần tử nào

p { color: blue; }
div { color: magenta; }

Bộ chọn lớp.

* {
  color: yellow;
}

9. Nó chọn tất cả các phần tử có


  

    
Hola World
    Hello World
    Hello Again World

0 đã chọn

.hello {
  color: red;
}

Bộ chọn ID.


  

    
Hola World
    Hello World
    Hello Again World

1. Nó chọn tất cả các phần tử có


  

    
Hola World
    Hello World
    Hello Again World

2 đã chọn

________số 8

bộ chọn chung.


  

    
Hola World
    Hello World
    Hello Again World

3. Nó chọn tất cả các phần tử

* {
  color: yellow;
}

> Lưu ý. Trước khi chuyển sang phần tiếp theo. Hãy nhớ rằng đang thực thi 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.
```
  

    
Hola World
    Hello World
    Hello Again World
  
```
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âu

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

5

Bộ chọn CSS trên mọi phần tử bên trong được chọn trong


  

    
Hola World
    Hello World
    Hello Again World

6

bộ 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ếp

Try test with CSS as after to view results nhé

* {
  color: yellow;
}

8

Trong 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ếp

p { color: blue; }
div { color: magenta; }

0

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


  

    
Hola World
    Hello World
    Hello Again World

9. To select many element / class / id

p { color: blue; }
div { color: magenta; }

1

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

30

Mã HTML

p { color: blue; }
div { color: magenta; }

2

Bộ chọn CSS kết hợp.
```
* {
  color: yellow;
}
```
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

p { color: blue; }
div { color: magenta; }

3

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

4

5. 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).
```
* {
  color: yellow;
}
```
32. Nhắm mục tiêu một phần tử anh chị em được đặt ngay sau phần tử đó

p { color: blue; }
div { color: magenta; }

6

Lư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).
```
* {
  color: yellow;
}
```
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

p { color: blue; }
div { color: magenta; }

8

Bạ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

8

Lưu ý. This selector not active back

The should CSS side not active

p { color: blue; }
div { color: magenta; }

9

6. Bộ chọn CSS giả

Mã HTML

.hello {
  color: red;
}

0

Select the first section.
```
* {
  color: yellow;
}
```
39. It select to the first element con. (
```
* {
  color: yellow;
}
```
50 phải có cha mẹ)

.hello {
  color: red;
}

1

You try to view. Target target

* {
  color: yellow;
}

51 has not public?

.hello {
  color: red;
}

2

không có gì xảy ra

Điều này được mặc định là mặc 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
```
* {
  color: yellow;
}
```
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

.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 (
```
* {
  color: yellow;
}
```
59). Tiêu đề ngoại trừ không được có anh chị em nào

.hello {
  color: red;
}

5

Lư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úng

Nó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.
```
* {
  color: yellow;
}
```
82. Nó chọn từng mục tiêu là con thứ
```
* {
  color: yellow;
}
```
83 của cha mẹ nó

.hello {
  color: red;
}

6

Please try with phần tử

* {
  color: yellow;
}

37

.hello {
  color: red;
}

7

You can see at sao hai phần tử

* {
  color: yellow;
}

37 thay đổi màu sắc?

The select con last N.
```
* {
  color: yellow;
}
```
86. Nó tương tự như bộ chọn con thứ N, ngoại trừ nó được tính từ cuối cùng

.hello {
  color: red;
}

8

Không chọn.
```
* {
  color: yellow;
}
```
87. Chọn tất cả các phần tử A mà không phải B

.hello {
  color: red;
}

9

First select type.
```
* {
  color: yellow;
}
```
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ó

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

1

Cá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.
```
p { color: blue; }
div { color: magenta; }
```
06. Giống như trên, nhưng ngược lại

#app {
  color: red;
}

2

Selected type thứ N.
```
p { color: blue; }
div { color: magenta; }
```
07. Cũng giống như hai bộ chọn trên, nhưng nó chọn phần tử thứ N

#app {
  color: red;
}

3

Please try with other section

#app {
  color: red;
}

4

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

09

Ngoà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.
```
p { color: blue; }
div { color: magenta; }
```
02. Chọn phần tử chỉ có loại đó, không có Anh/Chị/Em

#app {
  color: red;
}

5

Chú ý, 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ại

7. 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.
```
p { color: blue; }
div { color: magenta; }
```
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ết

#app {
  color: red;
}

7

Not 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.
```
p { color: blue; }
div { color: magenta; }
```
09. Chọn phần tử bạn đang tập trung vào nó. Thường được sử dụng với
```
p { color: blue; }
div { color: magenta; }
```
10

#app {
  color: red;
}

9

Bộ chọn hoạt động.
```
p { color: blue; }
div { color: magenta; }
```
11. Chọn phần tử đang có trạng thái hoạt động

* {
  color: yellow;
}

0

Lưu ý khi bạn nhấp vào nó, nền (nền) sẽ thay đổi

Bộ chọn liên kết.
```
p { color: blue; }
div { color: magenta; }
```
12. Nó chọn tất cả các liên kết chưa được nhấp

* {
  color: yellow;
}

1

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

p { color: blue; }
div { color: magenta; }

13. Chọn tất cả các phần tử

* {
  color: yellow;
}

50 có thuộc tính

p { color: blue; }
div { color: magenta; }

15

* {
  color: yellow;
}

3

The select tool tool.

p { color: blue; }
div { color: magenta; }

16. Chọn các phần tử

* {
  color: yellow;
}

50 có thuộc tính

p { color: blue; }
div { color: magenta; }

15 với giá trị là

p { color: blue; }
div { color: magenta; }

19

* {
  color: yellow;
}

4

Bộ tùy chọn thuộc tính cụ thể (Bắt đầu với. ).
```
p { color: blue; }
div { color: magenta; }
```
20. Chọn tất cả các phần tử
```
* {
  color: yellow;
}
```
50 có thuộc tính
```
p { color: blue; }
div { color: magenta; }
```
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)).

* {
  color: yellow;
}

5

Bộ tùy chọn thuộc tính cụ thể (Kết thúc với. ).
```
p { color: blue; }
div { color: magenta; }
```
25. Chọn tất cả các phần tử
```
* {
  color: yellow;
}
```
50 có thuộc tính
```
p { color: blue; }
div { color: magenta; }
```
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))

* {
  color: yellow;
}

6

Bộ chọn thuộc tính cụ thể (Chữ ký tự. ).

p { color: blue; }
div { color: magenta; }

30. Chọn tất cả các phần tử

* {
  color: yellow;
}

50 với thuộc tính

p { color: blue; }
div { color: magenta; }

15 có chứa giá trị

p { color: blue; }
div { color: magenta; }

19

* {
  color: yellow;
}

7

Ok, đế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à
```
* {
  color: yellow;
}
```
9)
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-TT/

#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #php #java #python

programming css

Css hoạt động không hoạt động

Tại sao bạn cần biết 8 CSS Selector này?

1. Bộ chọn CSS cơ bản

2. Bộ chọn CSS hậu duệ

3. Nhiều bộ chọn CSS

4. Bộ chọn CSS kết hợp

5. Bộ chọn CSS anh chị em

6. Bộ chọn CSS giả

7. Bộ chọn giả (liên kết và đầu vào)

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

Bạn đã biết quá nhiều về CSS Selector

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội