Không phải w3schools CSS con đầu tiên

Question

Chúng ta có thể sử dụng bộ chọn


 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Nội dung chính Show
 Tạo kiểu riêng cho con đầu tiên bằng cách sử dụng bộ chọn 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
9 Không chọn con đầu tiên trong CSS
# Đối số được phép
# Phiên bản CSS được giải thích ngắn gọn
# Đi qua một danh sách các bộ chọn
# Phủ định lồng nhau không được phép 🙈
# body p:not(:first-child) {
color: red;
}
22 so với body p:not(:first-child) {
color: red;
}
23
# Trẻ em đều giống nhau
# Trẻ em là các loại khác nhau
# Chọn Con Đầu Lòng
# Lớp giả CSS tương tự khác
# Hỗ trợ trình duyệt
# Đầu vào của cộng đồng
  
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

8 để chọn mọi phần tử khác không phải là phần tử được chọn. Vì vậy, chúng ta có thể sử dụng bộ chọn không chọn con đầu tiên trong CSS. Chúng ta có thể sử dụng


 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

9 làm bộ chọn trong bộ chọn


 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

8. Theo cách này, chúng ta có thể áp dụng các kiểu cho tất cả các phần tử con của một phần tử ngoại trừ phần tử đầu tiên. Ở đây, trong các trình duyệt có Bộ chọn CSS cấp 3 được hỗ trợ, chúng ta có thể sử dụng bộ chọn

body p:not(:first-child) {
color: red;
}

1

Ví dụ: tạo thẻ

body p:not(:first-child) {
color: red;
}

2 trong HTML. Sau đó, viết ba thẻ

body p:not(:first-child) {
color: red;
}

3 và viết một số nội dung bạn chọn giữa các thẻ. Trong CSS, chọn

body p:not(:first-child) {
color: red;
}

0 và đặt

body p:not(:first-child) {
color: red;
}

1 thành

body p:not(:first-child) {
color: red;
}

2

Ở đây, trong đoạn mã bên dưới, chúng ta có thể thấy rằng phần nội dung chứa các đoạn văn và tất cả chúng đều có màu phông chữ được đặt thành màu đỏ ngoại trừ đoạn đầu tiên. Vì vậy, chúng ta có thể chọn tất cả các phần tử con ngoại trừ phần tử con đầu tiên và áp dụng các kiểu. Tuy nhiên, bộ chọn

body p:not(:first-child) {
color: red;
}

1 có một số hạn chế nhất định (chẳng hạn như nó chỉ có thể xử lý các bộ chọn đơn giản làm đối số)

Mã ví dụ


 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

body p:not(:first-child) {
color: red;
}

Tạo kiểu riêng cho con đầu tiên bằng cách sử dụng bộ chọn Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 9 Không chọn con đầu tiên trong CSS

Chúng tôi có thể đặt các quy tắc cụ thể ghi đè quy tắc đã đặt trước đó bằng cách sử dụng bộ chọn


 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

9. Bằng kỹ thuật này, chúng ta có thể tạo kiểu cho tất cả các phần tử con ngoại trừ phần tử con đầu tiên. Ghi đè các kiểu bằng cách sử dụng bộ chọn


 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

9 sẽ làm cho phần tử con đầu tiên xuất hiện khác với các phần tử con khác

Ví dụ: sử dụng cấu trúc HTML giống như trong phương thức đầu tiên. Trong CSS, chọn thẻ

body p:not(:first-child) {
color: red;
}

3 và đặt

body p:not(:first-child) {
color: red;
}

1 thành màu xanh lam. Tiếp theo, chọn con đầu tiên là

body p:not(:first-child) {
color: red;
}

9 rồi đặt

body p:not(:first-child) {
color: red;
}

1 thành

p{
color:blue;
}
body p:first-child {
color: black;
}

1

Ở đây, kiểu mặc định cho các đoạn ngoại trừ đoạn đầu tiên được đặt là

p{
color:blue;
}
body p:first-child {
color: black;
}

2, trong khi nó bị ghi đè bởi

p{
color:blue;
}
body p:first-child {
color: black;
}

3 bằng cách sử dụng bộ chọn


 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

9. Vì vậy, chúng ta có thể sử dụng bộ chọn


 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.




 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

9 để không chọn con đầu tiên

Thay vì sử dụng 2 bộ chọn khác nhau để gán kiểu dáng và sau đó một bộ chọn khác để phủ nhận nó. Sử dụng. không phải bộ chọn để chọn mọi phần tử ngoại trừ những phần tử khớp với đối số bạn đã chuyển qua 👍

body p:not(:first-child) {
color: red;
}

1

Đối số được phép
- Phiên bản CSS được giải thích ngắn gọn
- Đi qua một danh sách các bộ chọn
Phủ định lồng nhau không được phép 🙈
con đầu vs. hạng nhất
- Trẻ em đều giống nhau
- Trẻ em là các loại khác nhau
- Chọn con đầu lòng
- Lớp giả CSS tương tự khác
Hỗ trợ trình duyệt
Đầu vào của cộng đồng
Tài nguyên

# Đối số được phép

Trong bản nháp hiện tại, Bộ chọn CSS Cấp 3, bạn chỉ có thể chuyển các bộ chọn đơn giản cho đối số của mình

Bộ chọn đơn giản

Bộ chọn loại
Bộ chọn chung
Bộ chọn thuộc tính
Bộ chọn lớp
Bộ chọn ID
lớp giả

body p:not(:first-child) {
color: red;
}

2

# Phiên bản CSS được giải thích ngắn gọn

Giống như cách JavaScript hoặc ECMAScript có các phiên bản khác nhau. CSS cũng có các phiên bản khác nhau. Tuy nhiên, không giống như ECMAScript, nơi mọi thứ đều thuộc một danh mục lớn (ES5, ES6, ES7), CSS hoạt động theo khối

Ví dụ: họ có Bộ chọn CSS Cấp 3, Bố cục Lưới CSS Cấp 1 và CSS Flexbox Cấp 1. Bộ chọn ________ 121 thuộc đặc tả Bộ chọn CSS Cấp 3. Công việc tiếp theo mà Nhóm công tác CSS đang thực hiện là. gợi ý, điều gì đến sau 3. ding ding, Bộ chọn CSS Cấp 4😜

Rachel Andrew đã viết một bài báo tuyệt vời giải thích về Cấp độ CSS, tôi cũng đã liên kết nó trong phần Tài nguyên, vì vậy hãy đọc nếu bạn quan tâm 🤓

# Đi qua một danh sách các bộ chọn

Trong phiên bản hiện tại, bạn chỉ có thể chuyển các bộ chọn đơn giản làm đối số của mình. Tuy nhiên, trong Bộ chọn CSS Cấp 4, bạn sẽ có thể chuyển vào danh sách các bộ chọn. Hay quá đúng không 👏

body p:not(:first-child) {
color: red;
}

4

Và đây là những gì sẽ được chọn

body p:not(:first-child) {
color: red;
}

5

# Phủ định lồng nhau không được phép 🙈

Một điều cần chỉ ra là các phủ định có thể không được lồng vào nhau. Vì vậy, đây là một không-không

body p:not(:first-child) {
color: red;
}

6

# body p:not(:first-child) { color: red; } 22 so với body p:not(:first-child) { color: red; } 23

Hãy bắt đầu bằng cách xác định chúng riêng lẻ

body p:not(:first-child) {
color: red;
}

22 chỉ chọn phần tử đầu tiên NẾU nó là con đầu tiên của cha mẹ nó. Điều đó có nghĩa là nếu nó không phải là con đầu tiên của cha mẹ, sẽ không có gì được chọn

body p:not(:first-child) {
color: red;
}

23 sẽ chọn phần tử đầu tiên của loại bạn đã chỉ định. Ngay cả khi nó không phải là đứa con đầu tiên của cha mẹ nó. Vì vậy, kết quả sẽ luôn xuất hiện nếu bạn sử dụng bộ chọn này (trừ khi bạn chọn một phần tử hoàn toàn không tồn tại)

Được rồi, hãy xem xét một số ví dụ

# Trẻ em đều giống nhau

Vì kiểu con giống nhau nên kết quả giống nhau cho cả hai

body p:not(:first-child) {
color: red;
}

1

# Trẻ em là các loại khác nhau

body p:not(:first-child) {
color: red;
}

2

NHƯNG vì

body p:not(:first-child) {
color: red;
}

26 không còn là con đầu lòng. Nếu bạn gọi cho

body p:not(:first-child) {
color: red;
}

27, NOTHING sẽ được chọn

body p:not(:first-child) {
color: red;
}

5

# Chọn Con Đầu Lòng

Vì vậy, bạn có thể tự hỏi, nếu tôi không quan tâm đến loại, tôi chỉ muốn chọn con đầu tiên của cha mẹ nó. Trong trường hợp đó, bạn có thể làm điều này

body p:not(:first-child) {
color: red;
}

6

body p:not(:first-child) {
color: red;
}

7

# Lớp giả CSS tương tự khác

Và sự hiểu biết này áp dụng cho các lớp anh em họ khác

body p:not(:first-child) {
color: red;
}

28 và

body p:not(:first-child) {
color: red;
}

29

body p:not(:first-child) {
color: red;
}

40 và

body p:not(:first-child) {
color: red;
}

41

body p:not(:first-child) {
color: red;
}

42 và

body p:not(:first-child) {
color: red;
}

43

# Hỗ trợ trình duyệt

Bộ chọn

body p:not(:first-child) {
color: red;
}

21 được hỗ trợ bởi hầu hết các trình duyệt hiện đại và Internet Explorer 9 trở lên

Tính tương thích của trình duyệt web

# Đầu vào của cộng đồng

@hkfoster. Một vài lớp lót nữa cũng thực hiện được điều này

body p:not(:first-child) {
color: red;
}

45

body p:not(:first-child) {
color: red;
}

46

@vels_io.

body p:not(:first-child) {
color: red;
}

47

@ andr3. Đó là một công cụ mạnh mẽ và cũng giống như bất kỳ thứ gì, phải được sử dụng một cách có trách nhiệm. Đối với ví dụ bạn có, bạn có thể thực hiện bằng một cách đơn giản

programming css

Không phải w3schools CSS con đầu tiên

Tạo kiểu riêng cho con đầu tiên bằng cách sử dụng bộ chọn Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 9 Không chọn con đầu tiên trong CSS

# Đối số được phép

# Phiên bản CSS được giải thích ngắn gọn

# Đi qua một danh sách các bộ chọn

# Phủ định lồng nhau không được phép 🙈

# body p:not(:first-child) { color: red; } 22 so với body p:not(:first-child) { color: red; } 23

# Trẻ em đều giống nhau

# Trẻ em là các loại khác nhau

# Chọn Con Đầu Lòng

# Lớp giả CSS tương tự khác

# Hỗ trợ trình duyệt

# Đầu vào của cộng đồng

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