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àmdiv: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. 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ó đượcMộ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àngBộ 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 íchBạ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 as a child element */
figure:has[figcaption] { … }
/* Matches elements that is a child of a that contains a child element */
figure:has[figcaption] img { … }
Ở đó, 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ướch2,
.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
*/
0Dự 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
*/
1Vì 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ệth2,
.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
*/
2Thê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
CSS bộ chọn cha mẹ con là gì?
Bộ chọn con. Bộ chọn con được dùng để so khớp tất cả các phần tử là phần tử con của một phần tử đã chỉ định . Nó đưa ra mối quan hệ giữa hai yếu tố. Bộ chọn phần tử > phần tử chọn những phần tử đó là con của phần tử cha cụ thể.
Làm cách nào để chọn lớp cha từ lớp con trong CSS?
Thật dễ dàng để áp dụng kiểu cho phần tử con, nhưng nếu bạn muốn áp dụng kiểu cho lớp cha đã có phần tử con, bạn có thể sử dụng bộ kết hợp con của bộ chọn CSS [ . Ví dụ: div > p chọn tất cả các phần tử . For example, div > p selects all elements where the parent is a
element.
Có bộ chọn gốc CSS không?
Có, có thể . Chúng ta có thể kiểm tra với quy tắc CSS @supports như sau.
Bộ chọn cha/con là gì?
Bộ chọn ["cha > con"] chọn tất cả các phần tử là phần tử con trực tiếp của phần tử đã chỉ định .
Chủ Đề