Người tiền nhiệm CSS

Bộ chọn CSS

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

3 giúp bạn chọn các phần tử có chứa các phần tử khớp với bộ chọn mà bạn chuyển vào hàm

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

4. Về cơ bản, nó là một bộ chọn "cha mẹ", mặc dù hữu ích hơn nhiều so với điều đó. Ví dụ: hãy tưởng tượng bạn có thể chọn tất cả các

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

5 nhưng chỉ khi chúng chứa một

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

6. Đó là những gì chúng ta có thể làm

div:has(p) {
  background: red;
}
/*
  
 
     

  


  
 
  
 
    

  
*/

Mặc dù nó không được hỗ trợ trong bất kỳ trình duyệt nào khi tôi viết, nhưng nó hiện đã bị loại bỏ trong Safari Technical Preview 137, vì vậy điều đó đang bắt đầu xảy ra

Khá tiện dụng đúng không. Đây là một ví dụ khác. Giả sử bạn muốn có khoảng trống sau tiêu đề của mình. Tất nhiên rồi. Một chút

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

7 trên

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

8 của bạn sẽ làm được. Nhưng… nếu có phụ đề thì sao?

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

Ở bên trái, khoảng cách chính xảy ra sau h2, ở bên phải, khoảng cách chính xảy ra sau phụ đề

Cách tôi nghĩ về

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

3 là thế này. đó là lớp giả của bộ chọn cha. Đó là CSS-speak cho “nó cho phép bạn thay đổi phần tử cha nếu nó có phần tử con hoặc phần tử khác theo sau nó. ” Điều này có thể cảm thấy kỳ lạ. Nó có thể phá vỡ mô hình tinh thần của bạn về cách thức hoạt động của CSS. Đây là cách tôi đã từng nghĩ về CSS

.parent .child {
  color: red;
}

Bạn chỉ có thể định kiểu xuống, từ cha sang con, nhưng không bao giờ sao lưu cây.

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

3 hoàn toàn thay đổi điều này bởi vì cho đến nay không có bộ chọn gốc nào trong CSS và có một số lý do chính đáng tại sao. Do cách trình duyệt phân tích cú pháp HTML và CSS, việc chọn cấp độ gốc nếu một số điều kiện nhất định được đáp ứng có thể dẫn đến tất cả các loại lo ngại về hiệu suất

Nếu tôi ngồi xuống và nghĩ về tất cả những cách tôi có thể sử dụng

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

3 ngày hôm nay, tôi sẽ cảm thấy đau đầu. Nó sẽ mở ra cơ hội cho pandora này mà chỉ riêng CSS chưa bao giờ có được

Một vi dụ khac. giả sử chúng ta chỉ muốn áp dụng các kiểu cho các liên kết có hình ảnh trong đó

a:has(> img) {
  border: 20px solid white;
}

Điều này sẽ hữu ích theo thời gian. Tôi cũng có thể thấy

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

3 được sử dụng để thêm lề và đệm vào các phần tử tùy thuộc vào nội dung của chúng. Đó sẽ là gọn gàng

Bộ chọn

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

3 là một phần của bộ chọn có cùng thông số kỹ thuật có lớp giả

.parent .child {
  color: red;
}

4 cực kỳ hữu ích

---

Bạn có thể lập luận rằng bộ chọn CSS

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

3 mạnh hơn chỉ là bộ chọn "cha", đó chính xác là những gì Bramus đã làm. Giống như trong ví dụ về tiêu đề phụ ở trên, cuối cùng bạn không nhất thiết phải chọn phần tử gốc, bạn có thể chọn phần tử gốc trong điều kiện có, nhưng sau đó cuối cùng chọn phần tử con từ đó

/*  Matches 
 elements that have a 

Ở đó, bạn có thể nhanh chóng thấy rằng bộ chọn thứ hai đang chọn một con

.parent .child {
  color: red;
}

6, không chỉ cha mẹ của

.parent .child {
  color: red;
}

7

Danh sách chọn

Bạn có thể xâu chuỗi nó

article:has(h2):has(ul) {

}

Hoặc cung cấp cho nó một danh sách chọn

article:has(h2, ul) {

}

Và danh sách là tha thứ. Danh sách này không còn được “tha thứ” sau khi W3C thông qua nghị quyết vào tháng 12 năm 2020 để giải quyết vấn đề được báo cáo. Vì vậy, nếu danh sách bộ chọn chứa dù chỉ một đối số không hợp lệ, thì toàn bộ danh sách sẽ bị bỏ qua

/* 👎 */
article:has(h2, ul, ::-blahdeath) {
  /* ::blahdeath is invalid, making the entire selector invalid. */
}

Một cách giải quyết khác là lồng một bộ chọn dễ tha thứ hơn vào đó, chẳng hạn như

.parent .child {
  color: red;
}

8 hoặc

.parent .child {
  color: red;
}

9

/* 👍 */
article:has(:where(h2, ul, ::-blahdeath)) {
  /* :where is a forgiving selector, making this valid. */
}

Kiểm tra hỗ trợ

@supports(selector(:has(p))) {
  /* Supported! */
}

Bộ chọn a:has(> img) { border: 20px solid white; }0 là một phần của cùng một thông số…

Không giống như

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

3,

a:has(> img) {
  border: 20px solid white;
}

2 có hỗ trợ trình duyệt khá tốt và tôi đã sử dụng nó lần đầu tiên vào ngày hôm trước

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

0

Dự phòng nhúng CodePen

Điều đó thật tuyệt, tôi cũng thích cách mà nó có thể đọc được;

Một cách khác bạn có thể sử dụng

a:has(> img) {
  border: 20px solid white;
}

2 là cho lề

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

1

Vì vậy, mọi phần tử không phải là mục cuối cùng đều có lề. Điều này hữu ích nếu bạn có nhiều yếu tố trong một thẻ, như thế này

Dự phòng nhúng CodePen

… và cả .parent .child { color: red; }8 và .parent .child { color: red; }9

Bộ chọn CSS Cấp 4 cũng là thông số tương tự có bộ chọn

a:has(> img) {
  border: 20px solid white;
}

6 có thể được sử dụng như thế này ngày nay trong nhiều trình duyệt

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

2

Thêm thông tin

À chính nó đấy.

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  

    
Blog Post Title
 
  

  

    
Blog Post Title
    
 
      This is a subtitle
    
  
*/

3 sẽ sớm được sử dụng khá hữu ích và những người anh em họ của nó là

a:has(> img) {
  border: 20px solid white;
}

8 và

a:has(> img) {
  border: 20px solid white;
}

2 có thể đã cực kỳ hữu ích và đó chỉ là một cái nhìn thoáng qua — chỉ có ba lớp giả CSS — có sẵn trong thông số kỹ thuật mới này

Ưu tiên của CSS là gì?

Làm cách nào để chọn một phần tử đứng trước một phần tử khác trong CSS?

Sự khác biệt giữa con và con cháu trong CSS là gì?

Làm cách nào để sử dụng hậu duệ trong CSS?