原生CSS嵌套使用，你学明白了吗？( 二 ) _CSS

文章插图
标题我们倾向于像下面这样设计标题：
.post-content h1,.post-content h2,.post-content h3,.post-content h4 {/* styles here */}使用CSS嵌套，它更简单：

.post-content {h1,h2,h3,h4 {color: var(--heading-color);font-weight: var(--heading-font-bold);margin-bottom: var(--size-2);}}

我们也可以使用:is()选择器来做同样的事情。

.post-content {:is(h1, h2, h3, h4) {color: var(--heading-color);font-weight: var(--heading-font-bold);margin-bottom: var(--size-2);}}

段落元素一个常见的情况是设置段落内部的链接样式。在这种情况下， CSS的嵌套功能非常好用。
.post-content {& p {color: var(--color-black);& a {font-weight: bold;text-decoration: underline;}}}链接可能也需要悬停或焦点效果。

.post-content {& p {color: var(--color-black);& a {font-weight: bold;text-decoration: underline;&:hover {/* hover styles */}}}}

我们还可以用在嵌套媒体查询。
.post-content {& p {/* base styles */@media (min-width: 400px) {/* do something */}}}帖子图片帖子图包含一个图像和一个可选的<figcaption>来显示图像的描述。

文章插图
在我的示例中，如果<figure>有标题，我需要对它进行不同的样式设置。可以通过嵌套CSS :has() 实现。

.post-content {& figure {& img {/* the figure's image styles */}/* changes to the <figure> contAIner, if it has a figcaption element */&:has(figcaption) {display: flex;align-items: start;}& figcaption {/* caption styling */}}}

文章列表

文章插图
我需要为所有列表项添加边框，除了最后一个。为此，我使用了:not()选择器。
.post-content {li {&:not(:last-child) {border-bottom: 1px solid;}}}要使用:not()，我们需要在它前面附加一个&符号。
自定义标题间距如果<h3>和<h4>之后是代码片段，我需要减少它们下方的间距。

文章插图
.post-content {& h3 + [class*="language-"],& h4 + [class*="language-"] {margin-top: 0.5rem;}}嵌套示例：卡片组件我将演示一个简单的卡片组件，它使用CSS嵌套来实现所需的样式。

文章插图
假设有一个默认或基本样式的.card元素，我将继续演示CSS嵌套的使用。
.card {/* default card styles */}如果容器宽度大于400px，我希望卡片成为一个Flex容器。

.card {/* default card styles *//* if the container width is 400px or bigger */@container card (min-width: 400px) {display: flex;}}

嵌套示例：表单输入一种常见的情况是对输入的占位符进行样式设置。问题是每个浏览器都有自己的前缀。

文章插图
由于前缀样式需要一个双冒号，我们需要使用与号& ，否则样式将中断。

input {--placeholder-color: #969696;/* other styles */&::-webkit-input-placeholder {color: var(--placeholder-color);}&::-moz-placeholder {color: var(--placeholder-color);opacity: 1;}&:-moz-placeholder {color: var(--placeholder-color);}}

我在探索CSS嵌套时发现的错误使用不带&号的通用选择器假设我们有一张卡片，我们想选择其中的所有元素。使用CSS原生嵌套，这应该可以工作：
.card {* {/* styles here */}}我发现这在Chrome稳定版中不起作用，但在Chrome Canary 121、Safari 17.1和Firefox 119中工作正常。
.card {& * {/* styles here */}}使用不带&号的自定义属性在这个问题中，选择一个不带&号的自定义属性将不会呈现预期的结果。
.card {[data-type="featured"] {/* styles here */}}我发现这在Chrome稳定版中不起作用，但在Chrome Canary 121、Safari 17.1和Firefox 119中工作正常。
为了解决这个问题，我们需要附加一个&符号：
.card {&[data-type="featured"] {/* styles here */}}这两个bug都在Chrome Canary中的宽松CSS嵌套版本中得到了修复。
检测CSS嵌套支持可以使用@supports来检查CSS嵌套支持。在我们的例子中，我们想检查浏览器是否识别&可以使用以下代码。