{"id":1084,"date":"2022-04-22T09:56:48","date_gmt":"2022-04-22T01:56:48","guid":{"rendered":"http:\/\/zhuxinyong.com\/?p=1084"},"modified":"2022-04-23T20:01:17","modified_gmt":"2022-04-23T12:01:17","slug":"css-fu-xuan-ze-qi","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1084","title":{"rendered":"CSS \u7236\u9009\u62e9\u5668"},"content":{"rendered":"

\u4f60\u662f\u5426\u60f3\u8fc7 CSS \u9009\u62e9\u5668\u53ef\u4ee5\u68c0\u6d4b\u7236\u5143\u7d20\u4e0b\u9762\u5305\u542b\u7279\u5b9a\u7684\u5143\u7d20\u5b58\u5728\uff1f\u4f8b\u5982\uff0c\u5982\u679c\u4e00\u4e2a card \u7ec4\u4ef6\u5305\u542b\u4e00\u4e2a\u7f29\u7565\u56fe\uff0c\u6211\u4eec\u9700\u8981\u6dfb\u52a0display:flex<\/code> \u6837\u5f0f\u3002\u5728\u4e4b\u524d\u7684 CSS \u4e2d\u662f\u4e0d\u53ef\u80fd\u7684\u4f46\u73b0\u5728\u6211\u4eec\u6709\u4e86\u65b0\u7684\u9009\u62e9\u5668\uff0c:has<\/code> \u9009\u62e9\u5668\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u9009\u51fa\u5305\u542b\u7279\u5b9a\u5143\u7d20\u7684\u7236\u7ea7\u4ee5\u53ca\u5176\u4ed6\u529f\u80fd\u3002<\/p>\n

\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u4f1a\u89e3\u91ca :has<\/code> \u89e3\u51b3\u4e86\u4ec0\u4e48\u95ee\u9898\uff0c\u5e76\u901a\u8fc7\u6848\u4f8b\u6765\u8bf4\u660e\u5b83\u662f\u5982\u4f55\u5de5\u4f5c\u4ee5\u53ca\u5728\u54ea\u53ef\u4ee5\u4f7f\u7528\uff0c\u4eca\u5929\u6700\u91cd\u8981\u7684\u4e8b\u6211\u4eec\u5982\u4f55\u4f7f\u7528\u5b83\u3002<\/p>\n

<\/span><\/a>\u95ee\u9898<\/h3>\n

\u4e4b\u524d\u6839\u636e\u4e00\u4e2a\u5143\u7d20\u662f\u5426\u5b58\u5728\u6765\u7ed9\u7236\u7ea7\u8bbe\u7f6e\u6837\u5f0f\u662f\u4e0d\u53ef\u80fd\u7684\uff0c\u6211\u4eec\u9700\u8981\u6839\u636e\u53d8\u52a8\u6765\u5207\u6362 CSS \u7684\u7c7b\u3002<\/p>\n

\u8003\u8651\u4e00\u4e0b\u63a5\u4e0b\u6765\u7684\u57fa\u7840\u4f8b\u5b50\uff1a<\/p>\n

\"\"<\/p>\n

\u6211\u4eec\u6709\u4e00\u4e2a card \u7ec4\u4ef6\uff0c\u5b83\u6709\u4e24\u79cd\u5f62\u6001\uff1a1. \u6709\u56fe\u7247\uff1b2.\u65e0\u56fe\u7247\u3002\u5728 CSS \u4e2d\uff0c\u6211\u4eec\u9700\u8981\u50cf\u4e0b\u9762\u5199\u4ee3\u7801\uff1a<\/p>\n

\/* A card with an image *\/\n.card {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n}\n\n\/* A card without an image *\/\n.card--plain {\n    display: block;\n    border-top: 3px solid #7c93e9;\n}\n<\/code><\/pre>\n
<!-- Card with an image -->\n<div class="card">\n    <div class="card__image">\n        <img src="awameh.jpg" alt="">\n    <\/div>\n    <div class="card__content">\n        <!-- Card content here -->\n    <\/div>\n<\/div>\n\n<!-- Card without an image -->\n<div class="card card--plain">\n    <div class="card__content">\n        <!-- Card content here -->\n    <\/div>\n<\/div>\n<\/code><\/pre>\n
\u5c31\u50cf\u4e0a\u9762\u770b\u5230\u7684\uff0c\u7531\u4e8e\u6ca1\u6709\u56fe\u7247\u7684 card \u6211\u4eec\u4e0d\u9700\u8981 flex \u6765\u5305\u88f9\u6240\u4ee5\u521b\u5efa\u4e86\u4e00\u4e2a\u7279\u5b9a\u7684 class \u6765\u6307\u5b9a\u3002\u90a3\u73b0\u5728\u95ee\u9898\u662f\uff0c\u6211\u4eec\u662f\u5426\u5728 CSS \u4e2d\u505a\u6761\u4ef6\u5224\u65ad\uff0c\u800c\u4e0d\u9700\u8981\u52a8\u6001\u7684 class \uff1f<\/p>\n
\u8fd9\u5c31\u9700\u8981  :has<\/code> \u6765\u6551\u573a\u4e86\uff0c\u5b83\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec .card<\/code> \u662f\u5426\u5305\u542b .card_image<\/code> \u3002<\/p>\n
\u4f8b\u5982\uff0c\u6211\u4eec\u53ef\u4ee5\u68c0\u6d4b card \u5143\u7d20 :has an image<\/strong>\uff0c\u82e5\u5305\u542b\uff0c\u6211\u4eec\u9700\u8981\u7ed9\u5b83\u52a0\u4e0a flexbox \u5c5e\u6027\u3002<\/p>\n
.card:has(.card__image) {\n    display: flex;\n    align-items: center;\n}\n<\/code><\/pre>\n
<\/span><\/a>\u4ecb\u7ecd CSS :has \u9009\u62e9\u5668<\/h3>\n
\u6839\u636e CSS spec <\/a> \uff0c:has<\/code> \u9009\u62e9\u5668\u662f\u68c0\u6d4b\u7236\u7ea7\u662f\u5426\u5305\u542b\u6307\u5b9a\u7684\u5143\u7d20\u6216 input \u662f\u5426\u83b7\u53d6\u7126\u70b9\u3002<\/p>\n
\u8ba9\u6211\u4eec\u518d\u6b21\u770b\u770b\u4e0a\u9762\u4f8b\u5b50\u7684\u4ee3\u7801\u7247\u6bb5\uff1a<\/p>\n
.card:has(.card__image) { }\n<\/code><\/pre>\n
\u6211\u4eec\u68c0\u6d4b .card<\/code> \u7236\u7ea7\u662f\u5426\u5305\u542b .card_image<\/code> \u5b50\u5143\u7d20\u3002\u7ec6\u770b\u4e0b\u9762\u7684\u56fe\u4f8b\uff1a<\/p>\n
\"\"<\/p>\n
\u7528\u6587\u5b57\u63cf\u8ff0\uff0c\u4e0a\u9762 CSS \u9009\u62e9\u5668\u7b49\u540c\u4e8e\u4e0b\u9762\uff1a<\/p>\n
\n
card \u662f\u5426\u5305\u542b card__image \u5143\u7d20\uff1f<\/p>\n<\/blockquote>\n
\u662f\u4e0d\u662f\u5f88\u795e\u5947\uff1f\u6211\u4eec\u5728 CSS \u4e2d\u6dfb\u52a0\u4e86\u903b\u8f91\uff0c\u5199 CSS \u591a\u4e48\u6ca1\u597d\u7684\u65f6\u5149\uff01<\/p>\n
<\/span><\/a>:has \u9009\u62e9\u5668\u4e0d\u4ec5\u4ec5\u548c Parent \u6709\u5173<\/h3>\n
\u5b83\u4e0d\u4ec5\u4ec5\u80fd\u68c0\u6d4b\u7236\u7ea7\u662f\u5426\u5305\u542b\u4e00\u4e2a\u7279\u5b9a\u5143\u7d20\uff0c\u4f8b\u5982\uff0c\u6211\u4eec\u8fd8\u53ef\u4ee5\u7528\u5979\u68c0\u6d4b\u4e00\u4e2a\u5143\u7d20\u662f\u5426\u8ddf\u7740 <p><\/code> \u5143\u7d20\u3002\u770b\u770b\u4e0b\u9762\uff1a<\/p>\n
.card h2:has(+ p) { }\n<\/code><\/pre>\n
\u8fd9\u5c31\u662f\u68c0\u6d4b\u4e86 <h2><\/code> \u5143\u7d20\u662f\u5426\u8ddf\u7740 <p><\/code> \u5143\u7d20\u3002\u6216\u8005\u6211\u4eec\u53ef\u4ee5\u7528\u5728\u68c0\u6d4b form \u5143\u7d20\u662f\u5426\u6709\u4e00\u4e2a focused<\/code> \u7684 input \uff0c\u4f8b\u5982\uff1a<\/p>\n
\/* If the form has a focused input, apply the following *\/\nform:has(input:focused) {\n    background-color: lightgrey;\n}\n<\/code><\/pre>\n
<\/span><\/a>\u6d4f\u89c8\u5668\u652f\u6301\u60c5\u51b5<\/h3>\n
\u622a\u6b62\u5230\u5199\u4f5c\u7684\u65f6\u95f4\uff0cCSS :has<\/code> \u53ea\u88ab Safari 15.4 \u548c Chrome Canary \u652f\u6301\u3002\u4fdd\u6301\u5bf9 Can I use<\/a> \u4e0a\u7684\u652f\u6301\u60c5\u51b5\u3002<\/p>\n
<\/span><\/a>\u6211\u4eec\u53ef\u5426\u7528\u5b83\u4f5c\u4e3a\u6e10\u8fdb\u589e\u5f3a\u7684\u65b9\u6848\uff1f<\/h3>\n
\u5f53\u7136\u53ef\u4ee5\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 @support<\/code> \u89c4\u5219\u6765\u68c0\u6d4b\u662f\u5426\u652f\u6301 :has<\/code>\uff1a<\/p>\n
@supports selector(:has(*)) {\n    \/* do something *\/\n}\n<\/code><\/pre>\n
\u597d\u4e86\uff0c\u7406\u8bba\u53ea\u662f\u5df2\u7ecf\u8bb2\u4e86\u5f88\u591a\uff0c\u63a5\u4e0b\u6765\u770b\u770b\u5b9e\u9645\u6848\u4f8b\uff1a<\/p>\n
<\/span><\/a>CSS :has \u7684\u6848\u4f8b<\/h3>\n
<\/span><\/a>Section Header<\/h4>\n
\u5f53\u6211\u4e66\u5199 Section Header \u65f6\uff0c\u7ecf\u5e38\u9047\u5230\u4e24\u79cd\u60c5\u51b5\uff0c\u4e00\u4e2a\u53ea\u5305\u542b\u6807\u9898\u53e6\u4e00\u4e2a\u65e2\u5305\u542b\u6807\u9898\u4e5f\u5305\u542b\u94fe\u63a5\u3002<\/p>\n
\"\"<\/p>\n
\u4f9d\u636e\u662f\u5426\u5b58\u5728\u94fe\u63a5\uff0c\u6211\u5e0c\u671b\u6dfb\u52a0\u4e0d\u540c\u7684\u6837\u5f0f\u3002<\/p>\n
<section>\n    <div class="section-header">\n        <h2>Latest articles<\/h2>\n        <a href="\/articles\/>See all<\/a>\n    <\/div>\n<\/section>\n<\/code><\/pre>\n
\u6ce8\u610f\uff0c\u6211\u4f7f\u7528\u4e86 :has(>a)<\/code> \u6765\u53ea\u9009\u62e9\u76f4\u63a5\u5b50\u94fe\u63a5\u3002<\/p>\n
.section-header {\n  display: flex;\n  justify-content: space-between;\n}\n\n\/* If there is a link, add the following *\/\n.section-header:has(> a) {\n  align-items: center;\n  border-bottom: 1px solid;\n  padding-bottom: 0.5rem;\n}\n<\/code><\/pre>\n
<\/span><\/a>Card \u7ec4\u4ef6\u4f8b\u5b501<\/h4>\n
\u8ba9\u6211\u4eec\u56de\u987e\u4e0a\u9762\u7684 card \u4f8b\u5b50\uff0c\u5305\u542b\u4e24\u79cd\u60c5\u51b5\uff0c\u4e00\u4e2a\u5305\u542b\u56fe\u7247\u800c\u53e6\u4e00\u4e2a\u4e0d\u5305\u542b\u3002<\/p>\n
\"\"<\/p>\n
.card:has(.card__image) {\n    display: flex;\n    align-items: center;\n}\n<\/code><\/pre>\n
\u6211\u4eec\u751a\u81f3\u53ef\u4ee5\u4e3a\u4e0d\u5305\u542b\u56fe\u7247\u7684 .card<\/code> \u5e94\u7528\u7279\u5b9a\u7684\u6837\u5f0f\uff0c\u5728\u6211\u4eec\u7684\u4f8b\u5b50\u4e2d\uff0c\u5c31\u662f border-top<\/code>\u3002<\/p>\n
.card:not(:has(.card__image)) {\n    border-top: 3px solid #7c93e9;\n}\n<\/code><\/pre>\n
\u82e5\u6ca1\u6709 CSS \u7684 :has<\/code>\uff0c\u6211\u4eec\u9700\u8981\u4e24\u4e2a CSS \u9009\u62e9\u5668\u6765\u89e3\u51b3\u6b64\u7c7b\u95ee\u9898\u3002<\/p>\n
.card--default {\n    display: flex;\n    align-items: center;\n}\n\n.card--plain {\n    border-top: 3px solid #7c93e9;\n}\n<\/code><\/pre>\n
<\/span><\/a>Card \u7ec4\u4ef6\u4f8b\u5b502<\/h4>\n
\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u6709\u4e24\u79cd\u60c5\u51b5\uff1a\u4e00\u79cd\u662f\u53ea\u5305\u542b\u94fe\u63a5\u800c\u53e6\u4e00\u79cd\u5305\u542b\u591a\u4e2a\u52a8\u4f5c\uff08\u4fdd\u5b58\u3001\u5206\u4eab\u7b49\u7b49\uff09\u3002<\/p>\n
\"\"<\/p>\n
\u5f53 card \u52a8\u4f5c\u7528\u4e24\u4e2a\u4e0d\u540c\u7684\u5143\u7d20\u6765\u5305\u88f9\u65f6\uff0c\u6211\u4eec\u5e0c\u671b\u4f7f\u7528 display:flex<\/code> \u6765\u5e03\u5c40\u3002<\/p>\n
<div class="card">\n    <div class="card__thumb><img src="cool.jpg"\/><\/div>\n    <div class="card__content">\n        <div class="card__actions">\n            <div class="start">\n                <a href="#">Like<\/a>\n                <a href="#">Save<\/a>\n            <\/div>\n            <div class="end">\n                <a href="#">More<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<\/code><\/pre>\n
.card__actions:has(.start, .end) {\n    display: flex;\n    justify-content: space-between;\n}\n<\/code><\/pre>\n
\u4e0b\u9762\u662f\u6ca1\u6709 CSS \u7684 :has<\/code> \u65f6\uff1a<\/p>\n
.card--with-actions .card__actions {\n    display: flex;\n    justify-content: space-between;\n}\n<\/code><\/pre>\n
<\/span><\/a>Card \u7ec4\u4ef6\u4f8b\u5b503<\/h4>\n
\u4f60\u662f\u5426\u9047\u5230\u8fc7 Card \u7ec4\u4ef6\u4e0d\u5305\u542b\u56fe\u7247\u65f6\uff0c\u9700\u8981\u4e3a\u5185\u5bb9\u6dfb\u52a0\u4e0a border-radius<\/code> \uff1f\u8fd9\u662f\u4f7f\u7528 :has<\/code> \u7684\u7edd\u4f73\u65f6\u673a\u3002<\/p>\n
\u8003\u8651\u4e0b\u9762\u7684\u56fe\u4f8b\uff0c\u5f53\u56fe\u7247\u88ab\u79fb\u9664\u65f6\u5de6\u4e0a\u89d2\u3001\u53f3\u4e0a\u89d2\u7684\u5706\u89d2\u53d8\u4e3a 0\uff0c\u770b\u4e0a\u53bb\u6709\u70b9\u5947\u602a\uff1a<\/p>\n
\"\"<\/p>\n
\/* If no image, add radius to the top left and right corners. *\/\n.card:not(:has(img)) .card__content {\n    border-top-left-radius: 12px;\n    border-top-right-radius: 12px;\n}\n\n.card img {\n    border-top-left-radius: 12px;\n    border-top-right-radius: 12px;\n}\n\n.card__content {\n    border-bottom-left-radius: 12px;\n    border-bottom-right-radius: 12px;\n}\n<\/code><\/pre>\n
\u73b0\u5728\u770b\u4e0a\u53bb\u597d\u591a\u4e86\uff01<\/p>\n
\"\"<\/p>\n
\u6ca1\u6709 :has<\/code> \u6211\u4eec\u5fc5\u987b\u8fd9\u6837\u505a\uff1a<\/p>\n
.card--plain .card__content {\n    border-top-left-radius: 12px;\n    border-top-right-radius: 12px;\n}\n<\/code><\/pre>\n
<\/span><\/a>\u8fc7\u6ee4\u7ec4\u4ef6<\/h4>\n
\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u6709\u4e00\u4e2a\u5305\u542b\u8bb8\u591a\u9009\u9879\u7684\u7ec4\u4ef6\uff0c\u5f53\u6ca1\u6709\u9009\u9879\u88ab\u9009\u4e2d\u65f6\uff0creset \u6309\u94ae\u5c31\u4e0d\u663e\u793a\u3002\u7136\u800c\u81f3\u5c11\u4e00\u4e2a\u88ab\u9009\u4e2d\u65f6\uff0creset \u6309\u94ae\u9700\u8981\u663e\u793a\u3002<\/p>\n
\"\"<\/p>\n
\u6211\u4eec\u53ef\u4ee5\u7b80\u5355\u7684\u901a\u8fc7 :has<\/code> \u6765\u5b9e\u73b0\u3002<\/p>\n
.btn-reset {\n    display: none;\n}\n\n.multiselect:has(input:checked) .btn-reset {\n    display: block;\n}\n<\/code><\/pre>\n
<\/span><\/a>\u6839\u636e\u6761\u4ef6\u663e\u9690\u8868\u5355\u5143\u7d20<\/h4>\n
\"\"<\/p>\n
\u6211\u4eec\u53ef\u80fd\u9700\u8981\u6839\u636e\u524d\u4e00\u4e2a\u7b54\u6848\u6216\u9009\u62e9\u6765\u5c55\u793a\u7279\u5b9a\u7684\u8868\u5355\u5b57\u6bb5\u3002\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4e00\u65e6\u9009\u62e9\u4e86 other<\/code> \u9009\u9879\u5c31\u9700\u8981\u663e\u793a \u201cother reason\u201d \u8f93\u5165\u6846\u3002<\/p>\n
\u901a\u8fc7 :has<\/code> \u7684\u529f\u80fd\uff0c\u6211\u4eec\u53ef\u4ee5\u68c0\u6d4b\u662f\u5426\u9009\u62e9\u4e86\u5305\u542b other<\/code> \u9009\u9879\u6765\u5c55\u793a \u201cother\u201d \u5b57\u6bb5\u3002<\/p>\n
.other-field {\n    display: block;\n}\n\nform:has(option[value="other"]:checked) .other-field {\n    display: block;\n}\n<\/code><\/pre>\n
\u662f\u4e0d\u662f\u5f88\u795e\u5947\uff1f<\/p>\n
<\/span><\/a>\u62e5\u6709\u5b50\u83dc\u5355\u7684\u5bfc\u822a<\/h4>\n
\u5728\u8fd9\u4e2a\u6848\u4f8b\u4e2d\uff0c\u6211\u4eec\u6709\u4e00\u4e2a\u5305\u542b\u5b50\u83dc\u5355\u7684\u5bfc\u822a\uff0chover \u6216 focus \u65f6\u5c55\u793a\u5b50\u83dc\u5355\u3002<\/p>\n
\"\"<\/p>\n
\u6211\u4eec\u60f3\u8981\u7684\u662f\u6839\u636e\u662f\u5426\u5305\u542b\u5b50\u83dc\u5355\u6765\u663e\u9690\u7bad\u5934\u3002\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 CSS :has<\/code> \u6765\u7b80\u5355\u7684\u5b9e\u73b0\uff0c\u601d\u8def\u662f\u68c0\u6d4b li \u662f\u5426\u5305\u542b ul\uff0c\u82e5\u6709\u5219\u663e\u793a\uff0c\u53cd\u4e4b\u9690\u85cf\u3002<\/p>\n
\/* Check if the <li> has a <ul>. Yes? show the arrow. *\/\nli:has(ul) > a:after {\n    content: "";\n    \/* arrow styling *\/\n}\n<\/code><\/pre>\n
\u82e5\u6ca1\u6709 CSS :has<\/code> \uff0c\u6211\u4eec\u53ef\u80fd\u9700\u8981\u5355\u72ec\u4e3a\u5305\u542b\u5b50\u83dc\u5355\u7684 li \u6dfb\u52a0\u4e00\u4e2a\u7c7b\uff0c\u50cf\u4e0b\u9762\u8fd9\u6837\uff1a<\/p>\n
.nav-item--with-sub > a:after {\n    content: "";\n    \/* arrow styling *\/\n}\n<\/code><\/pre>\n
<\/span><\/a>Header \u7684\u5305\u88f9\u5bb9\u5668<\/h4>\n
\u5f53\u6211\u4eec\u6709\u4e00\u4e2a header \u7ec4\u4ef6\u65f6\uff0c\u53ef\u80fd\u9700\u8981\u786e\u5b9a\u662f\u5360\u6ee1\u5c4f\u5e55\u7684\u5bbd\u5ea6\u6216\u5305\u542b\u5728\u4e00\u4e2a\u5bb9\u5668\u4e2d\u3002<\/p>\n
\"\"<\/p>\n
\u4efb\u4f55\u4e00\u79cd\u65b9\u6cd5\u90fd\u9700\u8981\u4f7f\u7528 flexbox \u4ee5\u4e00\u79cd\u7279\u5b9a\u7684\u65b9\u5f0f\u6765\u6392\u5217\u5b50\u5143\u7d20\u3002\u82e5\u5305\u542b .wrapper<\/code> \u76f4\u63a5\u5728\u5b83\u4e0a\u5e94\u7528\u6837\u5f0f\uff0c\u53cd\u4e4b\u5219\u9700\u8981\u5728 .site-header<\/code> \u4e0a\u4e66\u5199\u6837\u5f0f\u3002<\/p>\n
<header class="site-header">\n    <div class="wrapper">\n        <!-- Header content -->\n    <\/div>\n<\/header>\n<\/code><\/pre>\n
.site-header:not(:has(.wrapper)) {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-inline: 1rem;\n}\n\n\/* If it has a wrapper *\/\n.site-header .wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    max-width: 1000px;\n    margin-inline: auto;\n    padding-inline: 1rem;\n}\n<\/code><\/pre>\n
<\/span><\/a>\u5f3a\u8c03\u63d0\u9192<\/h4>\n
\u5728\u4e00\u4e9b\u540e\u53f0\u770b\u677f\u4e2d\uff0c\u6709\u4e00\u4e9b\u91cd\u8981\u7684\u63d0\u793a\u9700\u8981\u7528\u6237\u6ce8\u610f\u3002\u5728\u90a3\u79cd\u60c5\u51b5\u4e0b\uff0c\u5355\u5355\u7684\u63d0\u793a\u53ef\u80fd\u8fd8\u4e0d\u591f\u6211\u4eec\u53ef\u4ee5\u4e3a\u5934\u90e8\u5bfc\u822a\u6dfb\u52a0\u6d45\u7ea2\u8272\u80cc\u666f\uff0c\u4f8b\u5982\uff1a<\/p>\n
\"\"<\/p>\n
\u901a\u8fc7 :has<\/code> \u6211\u4eec\u53ef\u4ee5\u68c0\u6d4b .main<\/code> \u662f\u5426\u5305\u542b alert \uff0c\u7136\u540e\u6dfb\u52a0\u5bf9\u5e94\u7684\u6837\u5f0f\u3002<\/p>\n
.main:has(.alert) .header {\n    border-top: 2px solid red;\n    background-color: #fff4f4;\n}\n<\/code><\/pre>\n
<\/span><\/a>\u5207\u6362\u989c\u8272\u65b9\u6848<\/h4>\n
\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 :has<\/code> \u6765\u5207\u6362\u7f51\u9875\u989c\u8272\uff0c\u4f8b\u5982\uff0c\u82e5\u6211\u4eec\u6709\u591a\u79cd\u6839\u636e CSS \u53d8\u91cf\u6784\u5efa\u7684\u4e3b\u9898\uff0c\u53ef\u4ee5\u901a\u8fc7\u5207\u6362 select \u9009\u9879\u5b9e\u73b0\u3002<\/p>\n
html {\n    --color-1: #9e7ec8;\n    --color-2: #f1dceb;\n}\n<\/code><\/pre>\n
\"\"<\/p>\n
\u5f53\u6211\u4eec\u9009\u62e9\u5217\u8868\u4e2d\u7684\u5176\u4ed6\u9009\u9879\u65f6\uff0c CSS \u5c06\u4f1a\u5982\u4e0b\u53d8\u5316\uff1a<\/p>\n
html:has(option[value="default"]:checked) {\n  --color-1: #74559c;\n  --color-2: #f9f6fe;\n}\n\nhtml:has(option[value="blueish"]:checked) {\n  --color-1: #466ec0;\n  --color-2: #ebf0f7;\n}\n<\/code><\/pre>\n
\"\"<\/p>\n
<\/span><\/a>\u4e3a\u751f\u6210\u7684 HTML \u5e94\u7528\u6837\u5f0f<\/h4>\n
\u4e00\u4e9b\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u65e0\u6cd5\u63a7\u5236\u751f\u6210\u7684 HTML \u5185\u5bb9\uff0c\u4f8b\u5982\uff1a\u6587\u7ae0\u4e3b\u9898\uff0cCMS \u7cfb\u7edf\u53ef\u80fd\u4f1a\u751f\u6210\u610f\u5916\u7684\u5185\u5bb9\u6216\u4f5c\u8005\u53ef\u80fd\u4f1a\u5d4c\u5165\u89c6\u9891\u6216\u5176\u5b83\u7684\u3002<\/p>\n
\u5047\u8bbe\uff0c\u6211\u4eec\u53ef\u80fd\u5e0c\u671b\u9009\u4e2d\u6ca1\u6709 h3 \u540e\u9762\u6ca1\u6709 p \u6807\u7b7e\u7684\u5143\u7d20\u6765\u589e\u52a0\u4e00\u4e9b\u7a7a\u95f4\u3002<\/p>\n
.article-body h3:not(:has(+ p)) {\n    margin-bottom: 1.5rem;\n}\n<\/code><\/pre>\n
\u6216\u8005\u6211\u4eec\u60f3\u8981\u9009\u4e2d iframe \u540e\u9762\u7d27\u8ddf h3 \u7684\u6807\u7b7e\uff0c\u8fd9\u4e9b\u60c5\u51b5\u6ca1\u6709 :has<\/code> \u662f\u4e0d\u80fd\u5b8c\u6210\u7684\uff01<\/p>\n
.article-body h3:has(+ p) {\n    \/* do something *\/\n}\n<\/code><\/pre>\n
<\/span><\/a>\u5e26\u56fe\u6807\u7684\u6309\u94ae<\/h4>\n
\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u6709\u4e00\u4e2a\u9ed8\u8ba4\u7684\u6309\u94ae\u6837\u5f0f\u3002\u5f53\u6709\u56fe\u6807\u65f6\uff0c\u6211\u4eec\u671f\u671b\u4f7f\u7528 flexbox \u6765\u5c45\u4e2d\u548c\u5bf9\u9f50\u6309\u94ae\u5185\u5bb9\u3002<\/p>\n
\"\"<\/p>\n
.button:has(.c-icon) {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n}\n<\/code><\/pre>\n
<\/span><\/a>\u591a\u6309\u94ae<\/h4>\n
\u5728\u4e00\u4e2a\u8bbe\u8ba1\u7cfb\u7edf\u4e2d\uff0c\u6211\u4eec\u7ecf\u5e38\u4f1a\u6709\u4e00\u7ec4\u6309\u94ae\uff0c\u82e5\u6309\u94ae\u6570\u91cf\u8d85\u8fc7 2 \u4e2a\uff0c\u6700\u540e\u4e00\u4e2a\u9700\u8981\u653e\u5230\u53e6\u4e00\u8fb9\u3002<\/p>\n
\"\"<\/p>\n
\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 quantity queries<\/a> \u6765\u5b9e\u73b0\uff0c\u4e0b\u9762\u7684\u6837\u5f0f\u4f1a\u68c0\u6d4b\u6309\u94ae\u6570\u91cf\u662f\u5426\u591a\u4f59 3 \u4e2a\uff0c\u82e5\u591a\u5219\u4f1a\u901a\u8fc7  margin-left:auto<\/code> \u628a\u6700\u540e\u4e00\u4e2a\u5143\u7d20\u653e\u5230\u53f3\u8fb9\u3002<\/p>\n
.btn-group {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n  \n.btn-group:has(.button:nth-last-child(n + 3)) .button:last-child {\n    margin-left: auto;\n}\n<\/code><\/pre>\n
<\/span><\/a>\u4fe1\u606f\u6a21\u5757<\/h4>\n
\u6211\u5728 pinterest \u4e2d\u770b\u5230\u4e00\u4e2a\u8fd9\u6837\u7684\u4f8b\u5b50\uff0c\u5f53\u6709\u9519\u8bef\u65f6\uff0c\u6211\u4eec\u540c\u6837\u9700\u8981\u53d8\u66f4\u6807\u9898\u6765\u63d0\u9192\u3002<\/p>\n
\"\"<\/p>\n
.module:has(.input-error) .headline {\n    color: #ca3131;\n}\n<\/code><\/pre>\n
<\/span><\/a>\u4f9d\u636e\u6761\u76ee\u591a\u5c11\u6765\u6539\u53d8 Grid<\/h4>\n
\u901a\u8fc7 CSS grid \uff0c\u6211\u4eec\u4f7f\u7528 minmax()<\/code> \u6765\u521b\u5efa\u771f\u6b63\u7684\u54cd\u5e94\u5f0f\u548c\u81ea\u9002\u5e94\u7684 grid \u6761\u76ee\u3002\u53ef\u662f\uff0c\u90a3\u6837\u53ef\u80fd\u8fd8\u4e0d\u591f\uff0c\u6211\u4eec\u53ef\u80fd\u8fd8\u9700\u8981\u6839\u636e\u6761\u76ee\u7684\u591a\u5c11\u6765\u8bbe\u7f6e grid \u3002<\/p>\n
\u8003\u8651\u5982\u4e0b\u56fe\u4f8b\u3002<\/p>\n
\"\"<\/p>\n
.wrapper {\n    --item-size: 200px;\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(var(--item-size), 1fr));\n    gap: 1rem;\n}\n<\/code><\/pre>\n
\u5f53\u6709 5 \u4e2a\u6761\u76ee\u65f6\uff0c\u6700\u540e\u4e00\u4e2a\u4f1a\u53e6\u8d77\u4e00\u884c\u3002<\/p>\n
\"\"<\/p>\n
\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u68c0\u6d4b .wrapper<\/code> \u662f\u5426\u5305\u542b\u8d85\u8fc7 5\u4e2a\u6761\u76ee\uff0c\u7136\u540e\u4f7f\u7528 quantity queries \u7684\u6982\u5ff5\u3002<\/p>\n
.wrapper:has(.item:nth-last-child(n + 5)) {\n    --item-size: 120px;\n}\n<\/code><\/pre>\n
\"\"<\/p>\n
.wrapper:has(.item:nth-last-child(n + 5)) {\n    --item-size: 120px;\n}\n<\/code><\/pre>\n
\"\"<\/p>\n
<\/span><\/a>\u56fe\u4f8b\u548c\u56fe\u4f8b\u63cf\u8ff0<\/h4>\n
\"\"<\/p>\n
\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u6709\u4e00\u4e2a <figure><\/code>\uff0c\u82e5\u5305\u542b <figcaption><\/code>\uff0c\u6837\u5f0f\u53ef\u80fd\u4f1a\u6709\u70b9\u4e0d\u540c\uff1a<\/p>\n