CSS không (: con đầu lòng)

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

<div>
  <p>1p>
  <p>2p>
  <p>3p>
  <p class="special">4p>
  <p>5p>
div>

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

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

<div>
  <p>p> 
  <p>p>
div>

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

<div>
  <h1>h1>
  <p>p> 
  <p>p>
div>

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

<div>
  <h1>h1>
  <p>p>
  <p>p>
div>

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

<div class="parent">
  <h1>h1>
  <p>p>
  <p>p>
div>

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

• /* Type */
  h1 {}
  
  /* Universal */
  * {}
  
  /* Attribute */
  a[title] {}
  
  /* Class */
  .parent {}
  
  /* ID */
  #demo {}
  
  /* Pseudo-class */
  :first-child {}
  

  8 và

  /* Type */
  h1 {}
  
  /* Universal */
  * {}
  
  /* Attribute */
  a[title] {}
  
  /* Class */
  .parent {}
  
  /* ID */
  #demo {}
  
  /* Pseudo-class */
  :first-child {}
  

  9

• /* CSS Selectors Level 3 */
  p:not(:first-of-type):not(.special) {
  }
  
  /* CSS Selectors Level 4 */
  p:not(:first-of-type, .special) {
  }
  

  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

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

• /* CSS Selectors Level 3 */
  p:not(:first-of-type):not(.special) {
  }
  
  /* CSS Selectors Level 4 */
  p:not(:first-of-type, .special) {
  }
  

  5

• /* CSS Selectors Level 3 */
  p:not(:first-of-type):not(.special) {
  }
  
  /* CSS Selectors Level 4 */
  p:not(:first-of-type, .special) {
  }
  

  6

@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

Cái gì không (. đứa con đầu lòng?

Cái gì không (. con cuối cùng?

Làm cách nào để chọn tất cả trừ con đầu tiên trong CSS?

Tôi có thể sử dụng không con đầu tiên?