Css nếu cha mẹ có lớp

:has(  )

Tham số danh sách bộ chọn tương đối là. Thông thường trong CSS, khi một bộ chọn trong danh sách bộ chọn không hợp lệ, thì toàn bộ danh sách được coi là không hợp lệ. Khi một bộ chọn trong danh sách bộ chọn

:has(  )

Lưu ý rằng nếu bản thân lớp giả

:has(  )

:has(  )

:has(  )

:has(  )

Lớp giả

:has(  )

:has(  )

:has(  )

:has(  )

:has(  )

:has(  )

Khai báo kiểu

:has(  )

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

HTML

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

CSS

:has(  )

:has(  )

Kết quả

Ví dụ này hiển thị hai văn bản tương tự đặt cạnh nhau để so sánh – văn bản bên trái có tiêu đề

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

:has(  )

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

:has(  )

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

:has(  )

Ví dụ này dựa trên ví dụ trước để chỉ ra cách chọn nhiều phần tử với

:has(  )

HTML

:has(  )

CSS

:has(  )

:has(  )

Kết quả

Ở đây, lớp giả

:has(  )

:has(  )

:has(  )

:has(  )

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

:has(  )

:has(  )

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

:has(  )

:has(  )

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) { margin-bottom: 0; }

:has(  )

Bộ chọn này cũng có thể được viết là

:has(  )

Bộ chọn quan hệ

:has(  )

Bằng cách sử dụng các giá trị được phân tách bằng dấu phẩy bên trong bộ chọn quan hệ

:has(  )

:has(  )

:has(  )

:has(  )

:has(  )

Bằng cách xâu chuỗi nhiều bộ chọn quan hệ

:has(  )

:has(  )

:has(  )

:has(  )

:has(  )

Làm cách nào để áp dụng kiểu cho con nếu nó có cha mẹ bằng CSS?