Hướng dẫn css has child - css có con

Home » Web Development » Web Development

First child trong CSS

Bài viết này mình sẽ Hướng dẫn cách sử dụng first child trong CSS. Đây là một thuộc tính CSS khá hay ho trong tùy chỉnh danh sách trên trang web.first child trong CSS. Đây là một thuộc tính CSS khá hay ho trong tùy chỉnh danh sách trên trang web.

Bài viết có thể bạn quan tâm: Hướng dẫn cách sử dụng last child trong CSSHướng dẫn cách sử dụng last child trong CSS

Hướng dẫn cách sử dụng first child trong CSS

First child trong CSS hay đầy đủ là

#app {
  color: red;
}

0 là vùng chọn được sử dụng cho danh sách [list] trong CSS. Ở hình trên bạn thấy rõ ràng danh sách có 5 mục, trong đó mục đầu chữ màu xanh nhờ việc ứng dụng

#app {
  color: red;
}

1, 4 mục còn lại chữ màu đen như mặc định.
#app { color: red; }
0 là vùng chọn được sử dụng cho danh sách [list] trong CSS. Ở hình trên bạn thấy rõ ràng danh sách có 5 mục, trong đó mục đầu chữ màu xanh nhờ việc ứng dụng

#app {
  color: red;
}

1, 4 mục còn lại chữ màu đen như mặc định.

Sử dụng

#app {
  color: red;
}

1
#app { color: red; }
1

Cú pháp CSS của nó có dạng như này:

ul li:first-child {
background-color: #fcc;
font-weight: bold;
..
...
....
}

Một ví dụ ứng dụng cụ thể trên Hocban.vn cho bạn tham khảo: Khi mình muốn cái liên kết đầu tiên được nhấn mạnh bằng bôi màu vàng, lúc này CSS cho nó như này:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

Kết quả ra như này:

Vi du ve dung first child cho danh sach tren Hocbanvn

Bây giờ mình sẽ qua một ví dụ khác có danh sách cụ thể hơn để bạn thực hành theo. Các bạn có thể thay đổi giá trị màu nền

#app {
  color: red;
}

3 thành giá trị mà bạn muốn, tương tự bạn có thể thêm các thuộc tính khác cho mục đầu tiên tùy ý.

See the Pen First child trong CSS là gì và hướng dẫn cách sử dụng by Hocban.vn [@hocbanvn] on CodePen.
First child trong CSS là gì và hướng dẫn cách sử dụng by Hocban.vn [@hocbanvn]
on CodePen.

Như vậy là qua bài này bạn đã biết được First child trong CSS là gì rồi đúng không nào, với những ví dụ và minh họa trên mình tin chắc bạn sẽ sử dụng được.

About The Author

Tịnh Nguyễn

Học Bạn.vn là blog chia sẻ kinh nghiệm, thủ thuật về WordPress và Web Development hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển. là blog chia sẻ kinh nghiệm, thủ thuật về WordPress và Web Development hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển.

Biết cách sử dụng các Bộ chọn CSS [hay còn gọi là CSS Selector] là một kỹ năng bắt buộc của lập trình viên front end.Bộ chọn CSS [hay còn gọi là CSS Selector] là một kỹ năng bắt buộc của lập trình viên front end.

CSS Selector là gì?

Hiểu đơn giản CSS Selector 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.CSS Selector 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.

CSS Selector giống như là đường đẫn, chỉ định để cho 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 để điều chỉnh, tạo kiểu cho phần tử HTML.

CSS Selector trong file CSS

Qua bài viết này, bạn sẽ được tìm hiểu về 8 Loại CSS Selector phổ biến nhất.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.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 Loại 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ề mỗi nhóm, bạn sẽ thấy có một đoạn mã HTML.

Hãy sử dụng đoạn mã HTML đấy để 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ó còn tiếp tục được update.

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.

Mục lục:

1. Basic CSS Selectors
2. Descendant CSS Selectors
3. Multiple CSS Selector
4. Combination CSS Selectors
5. Sibling CSS Selectors
6. Pseudo CSS Selectors
7. Pseudo CSS Selectors [link và input]
8. Attribute CSS Selectors

1. Basic CSS Selector

Bộ chọn CSS cơ bản [Basic CSS Selector] sử dụng chọn element / class / id. [Basic CSS Selector] sử dụng chọn element / class / 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 sử dụng để cho bạn chơi với Basic CSS Selector.

Code HTML:


  
    Hello
    Hola


  
    I am left behind...

Element Selector:
```
#app {
  color: red;
}
```
4. Nó chọn bất kỳ phần tử nào đó.

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

Class Selector:
```
#app {
  color: red;
}
```
5. Nó chọn tất cả các phần tử có
```
#app {
  color: red;
}
```
6 đã cho.

.hello {
  color: red;
}

ID Selector:
```
#app {
  color: red;
}
```
7. Nó chọn tất cả các phần tử có
```
#app {
  color: red;
}
```
8 đã cho.

#app {
  color: red;
}

Universal selector:
```
#app {
  color: red;
}
```
9. 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ớ là thực hành sử dụng các 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é.Lưu ý: Trước khi chuyển sang phần tiếp theo. Hãy nhớ là thực hành sử dụng các 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é.

Và CSS Dinner là một trò rất thú vị để bạn luyện tập sử dụng CSS Selector. Vừa học lý thuyết về các Selctor [bên dưới đây] và dùng nó để vượt qua 32 Level này nhé.CSS Dinner là một trò rất thú vị để bạn luyện tập sử dụng CSS Selector. Vừa học lý thuyết về các Selctor [bên dưới đây] và dùng nó để vượt qua 32 Level này nhé.

Học CSS Selector qua Game CSS Dinner

2. Descendant CSS Selector

Đây là các CSS Selector để chọn hậu duệ của bất kỳ phần tử nào.CSS Selector để chọn hậu duệ của bất kỳ phần tử nào.

Code HTML:


  
    Hola World

  

    Hello World
    Hello Again World

Element Selector:
```
#app {
  color: red;
}
```
4. Nó chọn bất kỳ phần tử nào đó.

Class Selector:

#app {
  color: red;
}

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

#app {
  color: red;
}

6 đã cho.

Chúng ta có thể kết hợp với

#app {
  color: red;
}

9 để chọn tất cả các phần tử hậu duệ:

.paragraph-container * {
  color: blue;
}

ID Selector:

#app {
  color: red;
}

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

#app {
  color: red;
}

8 đã cho.

Child Selector:

* {
  color: yellow;
}

3. Không giống như Any Descendant CSS Selector, CSS Selector này chỉ chọn hậu duệ trực tiếp.

Thử nghiệm với CSS như sau để xem kết quả nhé:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì class

* {
  color: yellow;
}

4 trong HTML này không phải là hậu duệ trực tiếp.

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

3. Multiple CSS Selector

Multiple CSS Selector cho phép chúng ta chọn nhiều phần tử không liên quan với nhau. cho phép chúng ta chọn nhiều phần tử không liên quan với nhau.

Code HTML:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

Multiple CSS Selector:
```
* {
  color: yellow;
}
```
5 . Để chọn nhiều phần tử / class / id.

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

4. Combination CSS Selector

Conbination CSS Selector cho phép bạn chọn thành phần rất cụ thể bằng nhiều tham chiếu. 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 phổ biến nhất là hiệu ứng làm nổi bật button khi được di chuột [hovered] / nhấp [clicked] bằng cách cung cấp cho chúng một class

* {
  color: yellow;
}

Code HTML:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

Combination CSS Selector:
```
* {
  color: yellow;
}
```
7. Cho phép chọn phần tử chứa 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.

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

Chúng ta có thể kết hợp nhiều thứ, không phải chỉ có class. [Nhớ là để chúng sát với nhau]

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

5. Sibling CSS Selector

Sibling CSS Selector nhắm chọn các phần tử anh chị em. nhắm chọn các phần tử anh chị em.

Code HTML:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

Combination CSS Selector:
```
* {
  color: yellow;
}
```
7. Cho phép chọn phần tử chứa 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.

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

Chúng ta có thể kết hợp nhiều thứ, không phải chỉ có class. [Nhớ là để chúng sát với nhau]

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

5. Sibling CSS Selector


  
    Hello
    Hola
  
  
    I am left behind...

Sibling CSS Selector nhắm chọn các phần tử anh chị em.

Bộ chọn Anh / Chị / Em liền kề [Nghiêm ngặt]:

* {
  color: yellow;
}

8. Nhắm mục tiêu một phần tử anh chị em được đặt ngay sau phần tử đó.

Lưu ý rằng CSS bên dưới sẽ không hoạt động vì class

* {
  color: yellow;
}

9, mặc dù đó là anh chị em của


  
    Hola World
    Hello World
    Hello Again World

0, nhưng nó cách


  
    Hola World
    Hello World
    Hello Again World

0 2 phần tử.


  
    Hello
    Hola
  
  
    I am left behind...

Bộ chọn Anh / Chị / Em liền kề [Không nghiêm ngặt]:
Hola World Hello World Hello Again World
2. 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.

Code HTML:


  
    Hello
    Hola
  
  
    I am left behind...

Multiple CSS Selector:
```
* {
  color: yellow;
}
```
5 . Để chọn nhiều phần tử / class / id.


  
    Hello
    Hola
  
  
    I am left behind...

4. Combination CSS Selector


  
    Hello
    Hola
  
  
    I am left behind...

Conbination CSS Selector 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 phổ biến nhất là hiệu ứng làm nổi bật button khi được di chuột [hovered] / nhấp [clicked] bằng cách cung cấp cho chúng một class

* {
  color: yellow;
}

Code HTML:


  
    Hello
    Hola
  
  
    I am left behind...

Combination CSS Selector:
```
* {
  color: yellow;
}
```
7. Cho phép chọn phần tử chứa 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.


  
    Hello
    Hola
  
  
    I am left behind...

Chúng ta có thể kết hợp nhiều thứ, không phải chỉ có class. [Nhớ là để chúng sát với nhau]


  
    Hello
    Hola
  
  
    I am left behind...

5. Sibling CSS Selector

Sibling CSS Selector nhắm chọn các phần tử anh chị em.

Bộ chọn Anh / Chị / Em liền kề [Nghiêm ngặt]:
```
* {
  color: yellow;
}
```
8. Nhắm mục tiêu một phần tử anh chị em được đặt ngay sau phần tử đó.


  
    Hello
    Hola
  
  
    I am left behind...

Lưu ý rằng CSS bên dưới sẽ không hoạt động vì class

* {
  color: yellow;
}

9, mặc dù đó là anh chị em của


  
    Hola World
    Hello World

  

    Hello Again World

0, nhưng nó cách


  
    Hola World
    Hello World
    Hello Again World

0 2 phần tử.


  
    Hello
    Hola
  
  
    I am left behind...

Bộ chọn Anh / Chị / Em liền kề [Không nghiêm ngặt]:


  
    Hola World
    Hello World
    Hello Again World

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

Bạn thấy không, nó chọn cả thẻ
```
  
    Hola World
    Hello World
    Hello Again World
  
```
3 bên dưới vì chúng là phần tử anh chị em với nhau và có class là
```
* {
  color: yellow;
}
```
4

Lưu ý: Bộ chọn này không hoạt động ngược lại.

Thế nên CSS bên dưới không hoạt động.

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

6. Pesudo CSS Selector

Chọn phần tử đầu tiên:


  
    Hola World
    Hello World
    Hello Again World

5. Nó chọn đến phần tử con đầu tiên. [


  
    Hola World
    Hello World
    Hello Again World

6 phải có cha mẹ].

Bạn đoán thử xem. Nhắm mục tiêu


  
    Hola World
    Hello World
    Hello Again World

7 có thành công không?

Chẳng có gì xảy ra.

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

Điều này là do mặc dù


  
    Hola World
    Hello World
    Hello Again World

8 có cha mẹ [div với class


  
    Hola World
    Hello World
    Hello Again World

9], nhưng


  
    Hola World
    Hello World
    Hello Again World

8 không phải là con đầu tiên [nó là con thứ 3].

CSS dưới đây sẽ hoạt động vì

* {
  color: yellow;
}

2 là con đầu tiên của


  
    Hola World
    Hello World
    Hello Again World

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

Chọn phần tử con cuối cùng: A:last-child. Hoạt động như


  
    Hola World
    Hello World
    Hello Again World

5, ngoại trừ thay vì chọn phần tử con đầu tiên, nó chọn phần tử con cuối cùng.

Chỉ chọn phần tử con: A:only-child. Chọn tất cả A là con duy nhất của cha mẹ nó. Tương tự như bộ chọn phần tử con đầu tiên [


  
    Hola World
    Hello World
    Hello Again World

5] và phần tử con cuối cùng [

.container .hello-class {
  color: red;
}

5]. Ngoại trừ mục tiêu không được có anh chị em nào.

Lưu ý mặc dù chúng ta có một số phần tử


  
    Hola World
    Hello World
    Hello Again World

3, chỉ phần tử cuối cùng được áp dụng vì các phần tử


  
    Hola World
    Hello World
    Hello Again World

3 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 được áp dụng.

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

Bộ chọn phần tử con thứ N:
```
.container .hello-class {
  color: red;
}
```
8. Nó chọn từng mục tiêu là con thứ
```
.container .hello-class {
  color: red;
}
```
9 của cha mẹ nó.

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

Hãy thử với phần tử


  
    Hola World
    Hello World
    Hello Again World

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

Bạn có thể thấy tại sao hai phần tử


  
    Hola World

  

    Hello World
    Hello Again World

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

Bộ chọn con thứ N cuối cùng:

.paragraph-container * {
  color: blue;
}

2. Nó tương tự như bộ chọn con thứ N, ngoại trừ nó được tính từ cuối cùng.

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

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

Chú ý, chúng ta có hai phần tử


  
    Hola World
    Hello World
    Hello Again World

3 đổi màu.

Điều này là do có hai phần tử


  
    Hola World
    Hello World
    Hello Again World

3 này không có Anh / Chị / Em cùng loại.

7. Pesudo-Selector [links và input]

Dưới đây là danh sách các pesudo selector khác. Chúng thường được liên kết với các liên kết [

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

11] [mặc dù chúng có thể hoạt động với các phần tử không liên kết

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

12].pesudo selector khác. Chúng thường được liên kết với các liên kết [

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

11] [mặc dù chúng có thể hoạt động với các phần tử không liên kết

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

12].

Code HTML:

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

Hover Selector:
```
.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}
```
13. Chọn phần tử được hover. Thường được sử dụng để làm nổi bật các liên kết.

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

Không chỉ hoạt động với thẻ

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

11. Bộ chọn này hoạt động với mọi thứ.

.hello {
  color: red;
}

Focus Selector:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

15. Chọn phần tử bạn đang tập trung vào nó. Thường được sử dụng với

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

16.

.hello {
  color: red;
}

Active Selector:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

17. Chọn phần tử đang có trạng thái active.

.hello {
  color: red;
}

Lưu ý khi bạn click vào nó, nền [background] sẽ thay đổi.

Link Selector:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

18. Nó chọn tất cả các link chưa được click.

.hello {
  color: red;
}

8. Attribute CSS Selector

Bộ chọn thuộc tính CSS [Attribute CSS Selector] sử dụng để chọn thuộc tính HTML [HTML Attributes]. [Attribute CSS Selector] sử dụng để chọn thuộc tính HTML [HTML Attributes].

Code HTML:

.hello {
  color: red;
}

Hover Selector:
```
.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}
```
13. Chọn phần tử được hover. Thường được sử dụng để làm nổi bật các liên kết.

.hello {
  color: red;
}

Không chỉ hoạt động với thẻ
```
.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}
```
11. Bộ chọn này hoạt động với mọi thứ.

Focus Selector:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

15. Chọn phần tử bạn đang tập trung vào nó. Thường được sử dụng với

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

16.

Bộ chọn thuộc tính cụ thể [Bắt đầu với ...]:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

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


  
    Hola World
    Hello World
    Hello Again World

6 có thuộc tính

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

21 với giá trị bắt đầu là

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

25. Ký tự

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

30 là ký tự thể hiện chuỗi bắt đầu [trong Biểu thức chính quy [Regex]].

.hello {
  color: red;
}

Active Selector:
```
.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}
```
17. Chọn phần tử đang có trạng thái active.
Ký tự
```
.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}
```
35 là ký tự thể hiện chuỗi kết thúc trong [Biểu thức chính quy [Regex]].

.hello {
  color: red;
}

Lưu ý khi bạn click vào nó, nền [background] sẽ thay đổi.Chọn tất cả phần tử


  
    Hola World
    Hello World
    Hello Again World

6 với thuộc tính

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

21 chứa giá trị

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

25.

.hello {
  color: red;
}

Link Selector:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

18. Nó chọn tất cả các link chưa được click.

8. Attribute CSS Selector

Bộ chọn thuộc tính CSS [Attribute CSS Selector] sử dụng để chọn thuộc tính HTML [HTML Attributes].

Bộ chọn thuộc tính cơ bản:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

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


  
    Hola World
    Hello World
    Hello Again World

6 có thuộc tính

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

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

Bộ chọn thuộc tính cụ thể:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

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


  
    Hola World
    Hello World
    Hello Again World

6 có thuộc tính

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

21 với giá trị là

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

25.Nguyên tắc Độ đặc hiệu thấp thì:

.hello {
  color: red;
}

6 Bộ chọn thuộc tính cụ thể [Bắt đầu với ...]:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

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


  
    Hola World
    Hello World
    Hello Again World

6 có thuộc tính

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

21 với giá trị bắt đầu là

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

25. Ký tự

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

30 là ký tự thể hiện chuỗi bắt đầu [trong Biểu thức chính quy [Regex]].

Bộ chọn thuộc tính cụ thể [Kết thúc với ...]:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

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


  
    Hola World
    Hello World
    Hello Again World

6 có thuộc tính

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

21 với giá trị kết thúc là

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

25. Ký tự

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

35 là ký tự thể hiện chuỗi kết thúc trong [Biểu thức chính quy [Regex]].BEM để quản lý

Bộ chọn thuộc tính cụ thể [Chứ ký tự ...]:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

36. Chọn tất cả phần tử


  
    Hola World
    Hello World
    Hello Again World

6 với thuộc tính

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

21 chứa giá trị

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

25.

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...CSS Selector là gì và ghi nhớ một số Bộ chọn CSS phổ biến ở trên là quá đủ.

Mi đã biết quá nhiều về CSS SelectorChia sẻ và Bookmark lại để đọc kỹ hơn bạn nhé!

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ì:
//guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet/
//developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Nên sử dụng CSS Selector cùng một độ đặc hiệu [như là

#app {
  color: red;
}

Và đặt tên class theo nguyên tắc BEM để quản lý

Các CSS Selector 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 CSS Selector 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à Bookmark lại để đọc kỹ hơn bạn nhé!

Tham khảo:

//www.w3schools.com/cssref/css_selectors.asp //guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet/ //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Hướng dẫn cách sử dụng first child trong CSS

Sử dụng #app { color: red; }1#app { color: red; }1

About The Author

CSS Selector là gì?

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

1. Basic CSS Selector

2. Descendant CSS Selector

3. Multiple CSS Selector

4. Combination CSS Selector

5. Sibling CSS Selector

Bộ chọn Anh / Chị / Em liền kề [Không nghiêm ngặt]: Hola World Hello World Hello Again World 2. 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.

7. Pesudo-Selector [links và input]

8. Attribute CSS Selector

8. Attribute CSS Selector

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề

Sử dụng
`#app { color: red; }`
1
`#app { color: red; }`
1

Bộ chọn Anh / Chị / Em liền kề [Không nghiêm ngặt]:
`Hola World Hello World Hello Again World`
2. 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.