{"id":197,"date":"2026-07-07T10:05:17","date_gmt":"2026-07-07T02:05:17","guid":{"rendered":"https:\/\/yykcj.com\/?p=197"},"modified":"2026-07-07T10:05:17","modified_gmt":"2026-07-07T02:05:17","slug":"%e7%8e%b0%e4%bb%a3-css-%e4%b8%89%e5%89%91%e5%ae%a2%ef%bc%9acascade-layers%e3%80%81%e5%b5%8c%e5%a5%97%e3%80%81has-%e9%80%89%e6%8b%a9%e5%99%a8%e5%ae%9e%e6%88%98%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=197","title":{"rendered":"\u73b0\u4ee3 CSS \u4e09\u5251\u5ba2\uff1aCascade Layers\u3001\u5d4c\u5957\u3001:has() \u9009\u62e9\u5668\u5b9e\u6218\u6307\u5357"},"content":{"rendered":"<h2>\u5f15\u8a00<\/h2>\n<p>CSS \u8fd1\u5e74\u6765\u53d1\u5c55\u8fc5\u731b\uff0c\u4ece\u8fc7\u53bb\u7684\u201c\u6837\u5f0f\u8868\u8bed\u8a00\u201d\u9010\u6e10\u8fdb\u5316\u4e3a\u62e5\u6709\u5f3a\u5927\u903b\u8f91\u80fd\u529b\u7684\u201c\u6837\u5f0f\u7cfb\u7edf\u201d\u3002\u4eca\u5929\u6211\u4eec\u8981\u804a\u7684\u4e09\u4e2a\u7279\u6027\u2014\u2014<strong>Cascade Layers\uff08\u5c42\u53e0\u5c42\uff09<\/strong>\u3001<strong>CSS \u5d4c\u5957<\/strong>\u3001<strong><code>:has()<\/code> \u9009\u62e9\u5668<\/strong>\u2014\u2014\u5206\u522b\u89e3\u51b3\u4e86\u957f\u671f\u56f0\u6270\u5f00\u53d1\u8005\u7684\u4f18\u5148\u7ea7\u6df7\u4e71\u3001\u6837\u5f0f\u5197\u4f59\u548c\u7236\u7ea7\u9009\u62e9\u7f3a\u5931\u95ee\u9898\u3002<\/p>\n<p>\u5982\u679c\u4f60\u8fd8\u5728\u7528 BEM \u547d\u540d\u6cd5\u786c\u6491\u3001\u7528 <code>!important<\/code> \u66b4\u529b\u8986\u76d6\uff0c\u6216\u8005\u7528 JS \u6765\u76d1\u542c\u72b6\u6001\u6539\u53d8\u7236\u5143\u7d20\u6837\u5f0f\uff0c\u90a3\u4e48\u8fd9\u7bc7\u6587\u7ae0\u5c06\u4e3a\u4f60\u6253\u5f00\u65b0\u4e16\u754c\u7684\u5927\u95e8\u3002<\/p>\n<h2>1. Cascade Layers\uff1a\u544a\u522b\u4f18\u5148\u7ea7\u7126\u8651<\/h2>\n<h3>1.1 \u80cc\u666f\u4e0e\u95ee\u9898<\/h3>\n<p>\u4f20\u7edf CSS \u7684\u4f18\u5148\u7ea7\u57fa\u4e8e\u9009\u62e9\u5668\u7279\u5f02\u6027\uff08Specificity\uff09\u548c\u6e90\u7801\u987a\u5e8f\u3002\u5728\u5927\u578b\u9879\u76ee\u4e2d\uff0c\u7b2c\u4e09\u65b9\u5e93\uff08\u5982 Bootstrap\uff09\u3001\u7ec4\u4ef6\u5e93\u3001\u4e1a\u52a1\u6837\u5f0f\u5c42\u5c42\u53e0\u52a0\uff0c\u4f18\u5148\u7ea7\u8ba1\u7b97\u53d8\u5f97\u6781\u5176\u590d\u6742\uff0c\u7ecf\u5e38\u9700\u8981\u7528 <code>!important<\/code> \u5f3a\u884c\u8986\u76d6\uff0c\u5bfc\u81f4\u6837\u5f0f\u96be\u4ee5\u7ef4\u62a4\u3002<\/p>\n<h3>1.2 \u4ec0\u4e48\u662f Cascade Layers\uff1f<\/h3>\n<p><code>@layer<\/code> \u89c4\u5219\u5141\u8bb8\u4f60\u5c06\u6837\u5f0f\u5206\u5c42\u5b9a\u4e49\uff0c<strong>\u540e\u5b9a\u4e49\u7684\u5c42\u4f1a\u8986\u76d6\u5148\u5b9a\u4e49\u7684\u5c42<\/strong>\uff0c\u4e0e\u9009\u62e9\u5668\u7279\u5f02\u6027\u65e0\u5173\u3002\u8fd9\u5c31\u50cf\u7ed9\u6837\u5f0f\u52a0\u4e86\u201c\u4f18\u5148\u7ea7\u5c42\u7ea7\u201d\uff0c\u8ba9\u4f60\u4ece\u5168\u5c40\u89d2\u5ea6\u63a7\u5236\u6837\u5f0f\u6743\u91cd\u3002<\/p>\n<h3>1.3 \u57fa\u672c\u7528\u6cd5<\/h3>\n<pre><code class=\"language-css\">\n\/* \u5b9a\u4e49\u5c42\u987a\u5e8f\uff08\u540e\u5b9a\u4e49\u7684\u5c42\u4f18\u5148\u7ea7\u66f4\u9ad8\uff09 *\/\n@layer base, components, utilities;\n\n\/* \u5728 base \u5c42\u4e2d\u5b9a\u4e49\u57fa\u7840\u6837\u5f0f *\/\n@layer base {\n    button {\n        padding: 8px 16px;\n        border: 1px solid #ccc;\n        background: #f0f0f0;\n    }\n}\n\n\/* \u5728 components \u5c42\u4e2d\u5b9a\u4e49\u7ec4\u4ef6\u6837\u5f0f *\/\n@layer components {\n    .btn-primary {\n        background: #007bff;\n        color: white;\n        border-color: #007bff;\n    }\n}\n\n\/* \u5728 utilities \u5c42\u4e2d\u5b9a\u4e49\u5de5\u5177\u7c7b *\/\n@layer utilities {\n    .mt-4 {\n        margin-top: 1rem;\n    }\n}\n<\/code><\/pre>\n<p><strong>\u5173\u952e\u70b9<\/strong>\uff1a\u5373\u4f7f <code>base<\/code> \u5c42\u4e2d\u7684 <code>button<\/code> \u9009\u62e9\u5668\u7279\u5f02\u6027\u66f4\u9ad8\uff0c<code>components<\/code> \u5c42\u4e2d\u7684 <code>.btn-primary<\/code> \u4e5f\u4f1a\u8986\u76d6\u5b83\uff0c\u56e0\u4e3a <code>components<\/code> \u5c42\u5b9a\u4e49\u5728 <code>base<\/code> \u4e4b\u540e\u3002<\/p>\n<h3>1.4 \u5b9e\u6218\uff1a\u8986\u76d6\u7b2c\u4e09\u65b9\u5e93\u6837\u5f0f<\/h3>\n<p>\u5047\u8bbe\u4f60\u4f7f\u7528\u4e86 Bootstrap\uff0c\u5e76\u5e0c\u671b\u81ea\u5b9a\u4e49\u6309\u94ae\u6837\u5f0f\uff1a<\/p>\n<pre><code class=\"language-css\">\n\/* \u5148\u5b9a\u4e49\u5c42\uff1a\u7b2c\u4e09\u65b9\u5e93\u6837\u5f0f\u653e\u5728 lowest \u5c42\uff0c\u81ea\u5b9a\u4e49\u6837\u5f0f\u653e\u5728 higher \u5c42 *\/\n@layer bootstrap, custom;\n\n\/* \u5bfc\u5165 Bootstrap *\/\n@import url(&#x27;bootstrap.min.css&#x27;) layer(bootstrap);\n\n\/* \u81ea\u5b9a\u4e49\u6837\u5f0f *\/\n@layer custom {\n    .btn {\n        border-radius: 0; \/* \u8986\u76d6 Bootstrap \u7684\u5706\u89d2 *\/\n    }\n}\n<\/code><\/pre>\n<p>\u8fd9\u6837\uff0c\u65e0\u8bba Bootstrap \u5185\u90e8\u9009\u62e9\u5668\u7279\u5f02\u6027\u591a\u9ad8\uff0c\u4f60\u90fd\u53ef\u4ee5\u5728 <code>custom<\/code> \u5c42\u4e2d\u8f7b\u677e\u8986\u76d6\uff0c\u65e0\u9700 <code>!important<\/code>\u3002<\/p>\n<h3>1.5 \u6ce8\u610f\u4e8b\u9879<\/h3>\n<ul>\n<li><strong>\u5c42\u987a\u5e8f\u5fc5\u987b\u5728\u6240\u6709 <code>@layer<\/code> \u8bed\u53e5\u4e4b\u524d\u5b9a\u4e49<\/strong>\uff08\u53ef\u5728 <code><br \/>\n<style><\/code> \u9876\u90e8\u58f0\u660e\uff09\u3002<\/li>\n<li>\u672a\u5206\u5c42\u6837\u5f0f\uff08\u666e\u901a\u6837\u5f0f\uff09\u4f1a\u9690\u5f0f\u5730\u5904\u4e8e\u201c\u6700\u540e\u4e00\u5c42\u201d\uff0c\u4f18\u5148\u7ea7\u9ad8\u4e8e\u6240\u6709\u547d\u540d\u5c42\u3002<\/li>\n<li>\u533f\u540d\u5c42\uff1a<code>@layer { ... }<\/code> \u4f1a\u521b\u5efa\u4e00\u4e2a\u672a\u547d\u540d\u7684\u5c42\uff0c\u4f18\u5148\u7ea7\u4f4e\u4e8e\u547d\u540d\u5c42\u3002<\/li>\n<\/ul>\n<h2>2. CSS \u539f\u751f\u5d4c\u5957\uff1a\u544a\u522b\u9884\u5904\u7406\u5668\u4f9d\u8d56<\/h2>\n<h3>2.1 \u80cc\u666f\u4e0e\u95ee\u9898<\/h3>\n<p>\u8fc7\u53bb\uff0c\u6211\u4eec\u4f9d\u8d56 Sass\/Less \u5b9e\u73b0\u5d4c\u5957\u8bed\u6cd5\uff0c\u4ee5\u51cf\u5c11\u91cd\u590d\u9009\u62e9\u5668\u4e66\u5199\u3002\u4f46\u9884\u5904\u7406\u5668\u9700\u8981\u7f16\u8bd1\uff0c\u4e14\u5d4c\u5957\u8fc7\u6df1\u5bb9\u6613\u5bfc\u81f4\u9ad8\u7279\u5f02\u6027\u3002\u73b0\u5728\uff0cCSS \u539f\u751f\u5d4c\u5957\uff08CSS Nesting\uff09\u5df2\u7ecf\u5f97\u5230\u4e3b\u6d41\u6d4f\u89c8\u5668\u652f\u6301\u3002<\/p>\n<h3>2.2 \u57fa\u672c\u8bed\u6cd5<\/h3>\n<pre><code class=\"language-css\">\n.card {\n    background: white;\n    border-radius: 8px;\n    \n    &amp; .title {\n        font-size: 1.5rem;\n        font-weight: bold;\n    }\n    \n    &amp; .content {\n        padding: 1rem;\n        \n        &amp; p {\n            margin-bottom: 0.5rem;\n        }\n    }\n    \n    \/* \u4f2a\u7c7b\/\u4f2a\u5143\u7d20\u5d4c\u5957 *\/\n    &amp;:hover {\n        box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n    }\n    \n    \/* \u5a92\u4f53\u67e5\u8be2\u5d4c\u5957 *\/\n    @media (max-width: 600px) {\n        &amp; .title {\n            font-size: 1.2rem;\n        }\n    }\n}\n<\/code><\/pre>\n<p><code>&<\/code> \u7b26\u53f7\u4ee3\u8868\u5f53\u524d\u9009\u62e9\u5668\uff08\u7c7b\u4f3c Sass \u4e2d\u7684 <code>&<\/code>\uff09\u3002<\/p>\n<h3>2.3 \u4e0e\u9884\u5904\u7406\u5668\u5d4c\u5957\u7684\u5dee\u5f02<\/h3>\n<ul>\n<li><strong>\u53ea\u80fd\u4ee5 <code>&<\/code> \u5f00\u5934<\/strong>\uff1aCSS \u5d4c\u5957\u8981\u6c42\u5d4c\u5957\u7684\u9009\u62e9\u5668\u5fc5\u987b\u4ee5 <code>&<\/code> \u5f00\u5934\uff08\u9664\u975e\u662f\u4f2a\u7c7b\u6216\u4f2a\u5143\u7d20\uff09\u3002\u4f8b\u5982\uff0c<code>.card &<\/code> \u662f\u4e0d\u5141\u8bb8\u7684\uff0c\u4f60\u9700\u8981\u5199\u6210 <code>& .card<\/code>\u3002<\/li>\n<li><strong>\u4e0d\u53ef\u6df1\u5ea6\u5d4c\u5957<\/strong>\uff1a\u5efa\u8bae\u6700\u591a\u5d4c\u5957 3 \u5c42\uff0c\u907f\u514d\u9ad8\u7279\u5f02\u6027\u3002<\/li>\n<\/ul>\n<h3>2.4 \u5b9e\u6218\uff1a\u7ec4\u4ef6\u5316\u6837\u5f0f<\/h3>\n<pre><code class=\"language-css\">\n\/* \u6309\u94ae\u7ec4\u4ef6 *\/\n.btn {\n    display: inline-flex;\n    align-items: center;\n    padding: 0.5rem 1rem;\n    border: none;\n    cursor: pointer;\n    \n    &amp; .icon {\n        margin-right: 0.5rem;\n        width: 1em;\n        height: 1em;\n    }\n    \n    &amp;--primary {\n        background: #007bff;\n        color: white;\n        \n        &amp;:hover {\n            background: #0056b3;\n        }\n    }\n    \n    &amp;--large {\n        padding: 0.75rem 1.5rem;\n        font-size: 1.25rem;\n    }\n}\n<\/code><\/pre>\n<p>\u6ce8\u610f\uff1a<code>&--primary<\/code> \u4f1a\u88ab\u89e3\u6790\u4e3a <code>.btn--primary<\/code>\uff0c\u8fd9\u4e0e BEM \u547d\u540d\u6cd5\u5b8c\u7f8e\u517c\u5bb9\u3002<\/p>\n<h3>2.5 \u6d4f\u89c8\u5668\u652f\u6301<\/h3>\n<ul>\n<li>Chrome 120+\u3001Firefox 117+\u3001Safari 17.2+ \u5df2\u652f\u6301\u3002<\/li>\n<li>\u53ef\u4ee5\u4f7f\u7528 <code>@supports<\/code> \u8fdb\u884c\u7279\u6027\u68c0\u6d4b\uff1a<\/li>\n<\/ul>\n<pre><code class=\"language-css\">\n@supports (selector(&amp;)) {\n    \/* \u539f\u751f\u5d4c\u5957\u652f\u6301 *\/\n}\n<\/code><\/pre>\n<h2>3. <code>:has()<\/code> \u9009\u62e9\u5668\uff1a\u7236\u7ea7\u9009\u62e9\u5668\u7ec8\u4e8e\u6765\u4e86<\/h2>\n<h3>3.1 \u80cc\u666f\u4e0e\u95ee\u9898<\/h3>\n<p>\u957f\u671f\u4ee5\u6765\uff0cCSS \u65e0\u6cd5\u6839\u636e\u5b50\u5143\u7d20\u7684\u72b6\u6001\u6539\u53d8\u7236\u5143\u7d20\u6837\u5f0f\uff0c\u53ea\u80fd\u4f9d\u8d56 JS\u3002<code>:has()<\/code> \u9009\u62e9\u5668\u586b\u8865\u4e86\u8fd9\u4e00\u7a7a\u767d\uff0c\u88ab\u79f0\u4e3a\u201cCSS \u7684\u7236\u7ea7\u9009\u62e9\u5668\u201d\u3002<\/p>\n<h3>3.2 \u57fa\u672c\u8bed\u6cd5<\/h3>\n<p><code>:has()<\/code> \u63a5\u53d7\u4e00\u4e2a\u9009\u62e9\u5668\u5217\u8868\uff0c\u5982\u679c\u5f53\u524d\u5143\u7d20<strong>\u5305\u542b<\/strong>\u81f3\u5c11\u4e00\u4e2a\u5339\u914d\u8be5\u9009\u62e9\u5668\u7684\u5b50\u5143\u7d20\uff08\u6216\u540e\u4ee3\uff09\uff0c\u5219\u5339\u914d\u3002<\/p>\n<pre><code class=\"language-css\">\n\/* \u9009\u62e9\u5305\u542b &lt;img&gt; \u7684 &lt;figure&gt; *\/\nfigure:has(img) {\n    border: 1px solid #ccc;\n    padding: 8px;\n}\n\n\/* \u9009\u62e9\u5305\u542b .active \u5b50\u9879\u7684\u5217\u8868 *\/\nul:has(&gt; li.active) {\n    background: #f0f0f0;\n}\n<\/code><\/pre>\n<h3>3.3 \u5b9e\u6218\u6848\u4f8b<\/h3>\n<h4>3.3.1 \u8868\u5355\u9a8c\u8bc1\u6837\u5f0f<\/h4>\n<pre><code class=\"language-css\">\n\/* \u5f53\u8f93\u5165\u6846\u65e0\u6548\u65f6\uff0c\u8ba9\u7236\u5bb9\u5668\u663e\u793a\u9519\u8bef\u989c\u8272 *\/\n.form-group:has(input:invalid) {\n    border-left: 4px solid red;\n}\n\n.form-group:has(input:valid) {\n    border-left: 4px solid green;\n}\n<\/code><\/pre>\n<h4>3.3.2 \u5361\u7247\u60ac\u6d6e\u6548\u679c<\/h4>\n<pre><code class=\"language-css\">\n\/* \u5f53\u5361\u7247\u5185\u7684\u56fe\u7247\u88ab\u60ac\u6d6e\u65f6\uff0c\u5361\u7247\u6574\u4f53\u6dfb\u52a0\u9634\u5f71 *\/\n.card:has(img:hover) {\n    box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n}\n<\/code><\/pre>\n<h4>3.3.3 \u54cd\u5e94\u5f0f\u5bfc\u822a\u83dc\u5355<\/h4>\n<pre><code class=\"language-html\">\n&lt;nav&gt;\n    &lt;ul&gt;\n        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=&quot;dropdown&quot;&gt;\n            &lt;a href=&quot;#&quot;&gt;Services&lt;\/a&gt;\n            &lt;ul&gt;\n                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Web&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Mobile&lt;\/a&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/nav&gt;\n<\/code><\/pre>\n<pre><code class=\"language-css\">\n\/* \u5f53\u4e0b\u62c9\u83dc\u5355\u5c55\u5f00\u65f6\uff0c\u7236\u7ea7 li \u663e\u793a\u7bad\u5934 *\/\nli:has(ul) &gt; a::after {\n    content: &quot; \u25bc&quot;;\n}\n\nli:has(ul:hover) &gt; a {\n    color: blue;\n}\n<\/code><\/pre>\n<h3>3.4 \u6027\u80fd\u6ce8\u610f\u4e8b\u9879<\/h3>\n<ul>\n<li><code>:has()<\/code> \u7684\u8ba1\u7b97\u5f00\u9500\u8f83\u5927\uff0c\u5c3d\u91cf\u907f\u514d\u5728\u5927\u578b\u6587\u6863\u4e2d\u4f7f\u7528\u8fc7\u4e8e\u590d\u6742\u7684\u9009\u62e9\u5668\u3002<\/li>\n<li>\u5efa\u8bae\u7ed3\u5408\u5177\u4f53\u573a\u666f\uff0c\u5982\u8868\u5355\u9a8c\u8bc1\u3001\u4ea4\u4e92\u53cd\u9988\u7b49\uff0c\u907f\u514d\u5168\u5c40\u626b\u63cf\u3002<\/li>\n<\/ul>\n<h2>4. \u4e09\u5251\u5ba2\u8054\u5408\u5b9e\u6218\uff1a\u6784\u5efa\u4e00\u4e2a\u53ef\u7ef4\u62a4\u7684\u5361\u7247\u7ec4\u4ef6<\/h2>\n<p>\u73b0\u5728\uff0c\u6211\u4eec\u5c06\u4e09\u4e2a\u7279\u6027\u7ed3\u5408\u8d77\u6765\uff0c\u7f16\u5199\u4e00\u4e2a\u5361\u7247\u7ec4\u4ef6\u6837\u5f0f\uff1a<\/p>\n<pre><code class=\"language-css\">\n\/* 1. \u5b9a\u4e49\u5c42\u987a\u5e8f *\/\n@layer base, components, utilities;\n\n\/* 2. \u57fa\u7840\u5c42\uff1a\u91cd\u7f6e\u6837\u5f0f *\/\n@layer base {\n    * {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n    }\n}\n\n\/* 3. \u7ec4\u4ef6\u5c42\uff1a\u5361\u7247\u7ec4\u4ef6 *\/\n@layer components {\n    .card {\n        border: 1px solid #ddd;\n        border-radius: 8px;\n        overflow: hidden;\n        background: #fff;\n        transition: box-shadow 0.3s;\n        \n        \/* \u5d4c\u5957\uff1a\u5361\u7247\u5934\u90e8 *\/\n        &amp; .card-header {\n            padding: 1rem;\n            background: #f8f9fa;\n            border-bottom: 1px solid #ddd;\n        }\n        \n        \/* \u5d4c\u5957\uff1a\u5361\u7247\u4e3b\u4f53 *\/\n        &amp; .card-body {\n            padding: 1rem;\n        }\n        \n        \/* \u5d4c\u5957\uff1a\u5361\u7247\u5c3e\u90e8 *\/\n        &amp; .card-footer {\n            padding: 1rem;\n            background: #f8f9fa;\n            border-top: 1px solid #ddd;\n        }\n        \n        \/* \u4f7f\u7528 :has() \u5b9e\u73b0\uff1a\u5f53\u5361\u7247\u5305\u542b\u56fe\u7247\u65f6\uff0c\u6dfb\u52a0\u7279\u6b8a\u6837\u5f0f *\/\n        &amp;:has(img) {\n            &amp; .card-body {\n                padding: 0;\n            }\n        }\n        \n        \/* \u60ac\u6d6e\u6548\u679c *\/\n        &amp;:hover {\n            box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n        }\n        \n        \/* \u54cd\u5e94\u5f0f\uff1a\u5c0f\u5c4f\u5e55\u65f6\u8c03\u6574\u5185\u8fb9\u8ddd *\/\n        @media (max-width: 600px) {\n            &amp; .card-body {\n                padding: 0.5rem;\n            }\n        }\n    }\n}\n\n\/* 4. \u5de5\u5177\u5c42\uff1a\u8fb9\u8ddd\u5de5\u5177 *\/\n@layer utilities {\n    .mt-2 { margin-top: 0.5rem; }\n    .mb-2 { margin-bottom: 0.5rem; }\n}\n<\/code><\/pre>\n<p><strong>HTML \u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-html\">\n&lt;div class=&quot;card&quot;&gt;\n    &lt;div class=&quot;card-header&quot;&gt;\u6807\u9898&lt;\/div&gt;\n    &lt;div class=&quot;card-body&quot;&gt;\n        &lt;img src=&quot;photo.jpg&quot; alt=&quot;\u793a\u4f8b\u56fe\u7247&quot;&gt;\n        &lt;p&gt;\u5185\u5bb9...&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;card-footer&quot;&gt;\u811a\u6ce8&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p><strong>\u6548\u679c<\/strong>\uff1a\u5f53\u5361\u7247\u5305\u542b\u56fe\u7247\u65f6\uff0c<code>.card-body<\/code> \u5185\u8fb9\u8ddd\u6d88\u5931\uff0c\u56fe\u7247\u94fa\u6ee1\uff1b\u60ac\u6d6e\u65f6\u6dfb\u52a0\u9634\u5f71\uff1b\u79fb\u52a8\u7aef\u5185\u8fb9\u8ddd\u51cf\u5c0f\u3002\u6240\u6709\u6837\u5f0f\u6e05\u6670\u5206\u5c42\uff0c\u6613\u4e8e\u8986\u76d6\u3002<\/p>\n<h2>5. \u603b\u7ed3\u4e0e\u5c55\u671b<\/h2>\n<ul>\n<li><strong>Cascade Layers<\/strong>\uff1a\u8ba9\u4f60\u4ece\u5168\u5c40\u63a7\u5236\u4f18\u5148\u7ea7\uff0c\u544a\u522b <code>!important<\/code> \u548c\u7279\u5f02\u6027\u6218\u4e89\u3002<\/li>\n<li><strong>CSS \u5d4c\u5957<\/strong>\uff1a\u51cf\u5c11\u5197\u4f59\u9009\u62e9\u5668\uff0c\u4ee3\u7801\u66f4\u7b80\u6d01\uff0c\u4f46\u6ce8\u610f\u4e0d\u8981\u8fc7\u5ea6\u5d4c\u5957\u3002<\/li>\n<li><strong><code>:has()<\/code> \u9009\u62e9\u5668<\/strong>\uff1a\u5b9e\u73b0\u7236\u7ea7\u9009\u62e9\u5668\uff0c\u8ba9 CSS \u62e5\u6709\u66f4\u5f3a\u7684\u903b\u8f91\u80fd\u529b\u3002<\/li>\n<\/ul>\n<p>\u8fd9\u4e09\u4e2a\u7279\u6027\u7ec4\u5408\u4f7f\u7528\uff0c\u53ef\u4ee5\u6784\u5efa\u51fa\u9ad8\u5ea6\u53ef\u7ef4\u62a4\u3001\u53ef\u6269\u5c55\u7684\u6837\u5f0f\u7cfb\u7edf\u3002\u672a\u6765\uff0cCSS \u8fd8\u5c06\u5f15\u5165 <code>@scope<\/code>\u3001<code>@container<\/code> \u7b49\u66f4\u591a\u5f3a\u5927\u7279\u6027\uff0c\u8ba9\u6211\u4eec\u62ed\u76ee\u4ee5\u5f85\u3002<\/p>\n<p><strong>\u5ef6\u4f38\u9605\u8bfb<\/strong>\uff1a<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@layer\">MDN: @layer<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_nesting\">MDN: CSS Nesting<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:has\">MDN: :has()<\/a><\/li>\n<\/ul>\n<p>\u73b0\u5728\uff0c\u6253\u5f00\u4f60\u7684\u7f16\u8f91\u5668\uff0c\u5c1d\u8bd5\u7528\u8fd9\u4e9b\u65b0\u7279\u6027\u91cd\u6784\u4e00\u4e2a\u65e7\u9879\u76ee\u5427\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u6df1\u5165\u63a2\u8ba8 CSS \u7684\u4e09\u5927\u73b0\u4ee3\u7279\u6027\uff1aCascade Layers \u89e3\u51b3\u4f18\u5148\u7ea7\u51b2\u7a81\uff0c\u539f\u751f\u5d4c\u5957\u7b80\u5316\u6837\u5f0f\u7ec4\u7ec7\uff0c:has() \u5b9e\u73b0\u7236\u7ea7\u9009\u62e9\u5668\u3002\u901a\u8fc7\u5b9e\u9645\u6848\u4f8b\uff0c\u6559\u4f60\u5982\u4f55\u7528\u8fd9\u4e9b\u7279\u6027\u5199\u51fa\u66f4\u6e05\u6670\u3001\u53ef\u7ef4\u62a4\u7684\u6837\u5f0f\u4ee3\u7801\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[108,106,88,107,36,109],"class_list":["post-197","post","type-post","status-publish","format-standard","hentry","category-3","category-4","tag-has","tag-cascade-layers","tag-css","tag-36"],"_links":{"self":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=197"}],"version-history":[{"count":0,"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts\/197\/revisions"}],"wp:attachment":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}