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 👍
/* ❌ */
li {
margin-left: 10px;
}
li:first-of-type {
margin-left: 0;
}
/* ✅ Much Better */
li:not[:first-of-type] {
margin-left: 10px;
}
Đố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 làm đố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ả
/* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
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
/* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
1 thuộc thông số kỹ thuật Cấp 3 của Bộ chọn CSS. 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 👏
/* CSS Selectors Level 3 */
p:not[:first-of-type]:not[.special] {
}
/* CSS Selectors Level 4 */
p:not[:first-of-type, .special] {
}
Và đây là những gì sẽ được chọn
1
2
3
4
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
:not[:not[...]] {
}
/* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
2 đấu với /* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
3
/* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
/* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
Hãy bắt đầu bằng cách xác định chúng riêng lẻ
/* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
2 chỉ chọn phần tử đầu tiên NẾU nó là phần tử 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/* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
3 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
Trẻ em là các loại khác nhau
NHƯNG vì
/* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
6 không còn là con đầu lòng. Nếu bạn gọi /* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
7, NOTHING sẽ được chọn
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
.parent :first-child {
color: blue;
}
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
8 và/* Type */ h1 {} /* Universal */ * {} /* Attribute */ a[title] {} /* Class */ .parent {} /* ID */ #demo {} /* Pseudo-class */ :first-child {}
9/* Type */ h1 {} /* Universal */ * {} /* Attribute */ a[title] {} /* Class */ .parent {} /* ID */ #demo {} /* Pseudo-class */ :first-child {}
0 và/* CSS Selectors Level 3 */ p:not[:first-of-type]:not[.special] { } /* CSS Selectors Level 4 */ p:not[:first-of-type, .special] { }
1/* CSS Selectors Level 3 */ p:not[:first-of-type]:not[.special] { } /* CSS Selectors Level 4 */ p:not[:first-of-type, .special] { }
2 và/* CSS Selectors Level 3 */ p:not[:first-of-type]:not[.special] { } /* CSS Selectors Level 4 */ p:not[:first-of-type, .special] { }
3/* CSS Selectors Level 3 */ p:not[:first-of-type]:not[.special] { } /* CSS Selectors Level 4 */ p:not[:first-of-type, .special] { }
Hỗ trợ trình duyệt
Bộ chọn
/* Type */
h1 {}
/* Universal */
* {}
/* Attribute */
a[title] {}
/* Class */
.parent {}
/* ID */
#demo {}
/* Pseudo-class */
:first-child {}
1 đượ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Đầ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
5/* CSS Selectors Level 3 */ p:not[:first-of-type]:not[.special] { } /* CSS Selectors Level 4 */ p:not[:first-of-type, .special] { }
6/* CSS Selectors Level 3 */ p:not[:first-of-type]:not[.special] { } /* CSS Selectors Level 4 */ p:not[:first-of-type, .special] { }
@vels_io.
/* CSS Selectors Level 3 */
p:not[:first-of-type]:not[.special] {
}
/* CSS Selectors Level 4 */
p:not[:first-of-type, .special] {
}
7@ 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