原生CSS嵌套使用

更新日期: 2023-12-07阅读: 332标签: 样式

如果您是使用 css 预处理器的前端开发人员,那么您可能遇到或使用过嵌套功能。这是一个很受欢迎的功能,对我来说,它是让我继续使用 CSS 预处理器的功能之一。

今年,所有主要浏览器都支持原生 CSS 嵌套:Chrome、Firefox 和 Safari。这是 CSS 的一个主要功能,它将使 CSS 的编写变得更加容易。在本文中,我将记录迄今为止我学到的有关 CSS 嵌套的知识,并与您分享我的发现以及用例和示例。

除了您的兴奋和专注之外,没有任何先决条件可以遵循。

介绍

CSS 中的嵌套一直是许多开发人员期待已久的功能之一。我们曾经依赖 Sass 或 Less 等 CSS 预处理器。让我快速回顾一下:

考虑以下示例。我们有一个嵌套在选择器中的图标.nav__item。

.nav__item {
  .icon {
    display: flex;
    padding: 1rem;
  }
}

以上是有效的 Sass 代码。编译后,它在浏览器中将如下所示:

.nav__item .icon {
  display: flex;
  padding: 1rem;
}

通过本机 CSS 嵌套,相同的 CSS 将按原样工作。下图显示了原生 CSS 嵌套和浏览器 DevTools 之间的比较。


请注意浏览器显示 CSS 的方式(几乎)与在 CSS 中显示的方式相似。

如果这个 CSS 是在 Sass 中编译的,浏览器将显示如下:


CSS 嵌套的好处

我认为嵌套 CSS 有用有一些正当理由:

  • CSS 更容易阅读。
  • 将风格分组在一起。
  • 确定特定样式的范围。
  • 设计没有类或 ID 的 html 元素。

CSS 嵌套规则

为了让您了解 CSS 嵌套,我将尝试提供不同 CSS 问题的可视化示例以及嵌套如何帮助解决这些问题。

首先,您需要了解 & 符号&。在多种情况下需要使用此符号。

嵌套没有类或 ID 的元素


在此示例中,该<a>元素通过.nav__item. 为了使 CSS 有效,可以选择使用 & 符号。

.nav__item {
  & a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* Same as: */
.nav__item a {
}

您还可以选择不使用“&”:

.nav__item {
  a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* Same as: */
.nav__item a {
}

请注意,这是最近的更新,称为“宽松 CSS 嵌套”。它适用于最新的 Chrome Canary 和 Safari 技术预览版。查看Adam Argyle 撰写的关于轻松嵌套的文章

将元素与类嵌套


采用与前面相同的示例,但假设该<a>元素具有 HTML 类。

.nav__item {
  .link {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* Same as: */
.nav__item .link {
}

这里不需要使用&符号。类名可以正常工作。

嵌套 CSS 组合器

CSS 原生嵌套的好处之一是使用组合器。让我们举几个例子。

在下面的示例中,我想选择具有相同类的每个元素,该类.nav__item前面有另一个具有相同类的元素。为此,我使用了相邻的同级选择器


在原生 CSS 嵌套中,我们可以使用 & 符号来模仿它。请注意,我重复了两次。

.nav__item {
  & + & {
    border-left: 2px solid;
  }
}

神奇的事情发生在第二次重复“&”符号时。在这里,浏览器会理解我想使用相邻的同级选择器。让我给你看一张图来说明这一点:


另一个例子是嵌套子组合器。它可以选择元素的直接子元素。

.nav__item {
  > a {
    padding: 1rem;
  }
}

& 符号

.nav__item {
  & a {
    color: blue;
  }
}

这是最初的 CSS 嵌套规范所要求的。在Safari TP 179+Chrome Canary 120中,嵌套元素不再需要 & 符号。

结果,进行了以下工作:

.nav__item {
  a {
    color: blue;
  }
}

唯一的问题是您必须回退到规范的先前版本,其中必须包含&&符号。

嵌套示例:活动、焦点、悬停

、和是 CSS 伪类,通过:active用户操作激活。:focus:hover


通过 CSS 嵌套,可以一次将它们全部嵌套以避免代码重复。我们举:hover个例子:

button {
  &:hover {
    background-color: var(--bg-color);
  }

  &:focus {
    outline: solid 2px;
  }
}

使用预处理器进行嵌套时的区别在于浏览器将像这样渲染它:

button:hover {
  background-color: var(--bg-color);
}

button:focus {
  outline: solid 2px;
}

我们来看看原生 CSS 嵌套在 Chrome、Safari 和 Firefox 中是如何渲染的。


我对 CSS 嵌套的 DevTools UX 有一些想法,并将在本文后面讨论它们。

嵌套示例:帖子内容

尝试 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 */
    }
  }
}

在某些情况下,CMS 可能会将一个<p>元素包装在另一个元素中,出于样式目的,您只需对直接 <p>元素进行样式设置。

.post-content {
  /* Select the direct <p> elements */
  > p {
    /* base styles */
  }
}

块报价

在此示例中,报价获得其自定义样式,并且<p>选择报价内的元素以将底部边距重置为零。

.post-content {
  & blockquote {
    /* custom quote styling */

    & p {
      margin-bottom: 0;
    }
  }
}

帖子图片

帖子图包含一张图像和一个<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 嵌套的使用非常简单,尤其是如果您有 CSS 预处理器经验的话。

嵌套示例:卡片组件

我将演示一个简单的卡片组件,它使用 CSS 嵌套来实现所需的样式。


假设有一个.card具有默认或基本样式的元素,我将继续展示 CSS 嵌套的使用。

.card {
  /* default card styles */
}

嵌套容器查询

如果容器宽度大于400px,我希望卡片成为弹性容器。

.card {
  /* default card styles */

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

设置段落元素的样式

我想通过<h3>. 这样,我可以向<p>元素添加边距和填充。如果不存在,用户界面将不会有额外的间距。

.card__content {
  & h3 + p {
    border-top: 1px solid #000;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }
}

当容器宽度为 400px 或更大时,.card__content元素也应该成为弹性容器。

.card__content {
  & h3 + p {
    border-top: 1px solid #000;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }

  @container card (min-width: 400px) {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

嵌套示例:表单输入

常见的情况是设置输入占位符的样式。问题是每个浏览器供应商都有自己的前缀(哦,是 2023)。


由于前缀样式需要双冒号,因此我们需要使用 & 符号&,否则样式将被破坏。

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 嵌套直接编写前缀样式有什么区别。

/********** Option 1: native nesting **********/
input {
  &::-webkit-input-placeholder {
    color: var(--placeholder-color);
  }
}

/********** Option 2: without nesting **********/
input::-webkit-input-placeholder {
  color: var(--placeholder-color);
}

两者没有区别。两者具有相同的特异性(0, 1, 1)。

嵌套示例:通过其父元素设置元素的样式

我们可以使用原生 CSS 嵌套来根据子项所在的位置更改其样式。例如,如果.button元素位于.box父元素内,则它应该采用完整宽度。


<div class="box">
    <h2>Get access to all features</h2>
    <p>Create an account now and get access to all exclusive features.</p>
    <a href="/offer" class="button">Create an account</a>
</div>
.button {
  .box & {
    width: 100%;
  }
}

/* equivalent to */
.box .button {
}

我在探索 CSS 嵌套时发现的错误

使用不带 & 符号的通用选择器

假设我们有一张卡片,我们想要选择其中的所有元素。使用 CSS 原生嵌套,这应该可以工作:

.card {
  * {
    /* styles here */
  }
}

我发现这在 Chrome 稳定版中不起作用,但在 Chrome Canary 121、Safari 17.1 和 Firefox 119 中运行良好。

修复方法是附加一个 & 符号。

.card {
  & * {
    /* styles here */
  }
}

数据属性

在此问题中,选择不带“&”符号的数据属性将不会呈现预期结果。

.card {
  [] {
    /* styles here */
  }
}

我发现这在 Chrome 稳定版中不起作用,但在 Chrome Canary 121、Safari 17.1 和 Firefox 119 中运行良好。

为了解决这个问题,我们需要附加一个&符号:

.card {
  &[] {
    /* styles here */
  }
}

这两个错误都在 Chrome Canary 中轻松 CSS 嵌套的版本中得到了修复。

检测对 CSS 嵌套的支持

可以用来@supports检查 CSS 嵌套支持。在我们的例子中,我们想要检查浏览器是否识别&符号。

@supports selector(&) {
  .post-content {
    & h2 {
      /* styles here. */
    }
  }
}

您可以探索其他选项来检测Bramus 的 Codepen中的支持。

对我来说,今天我将使用PostCSS 嵌套插件,它将原生 CSS 嵌套编译为普通 CSS。一旦可以安全使用,我就会放弃该插件。

用于 CSS 嵌套的 DevTools UX

我不太喜欢浏览器 DevTools 中 CSS 嵌套的当前 UX。


我写了一篇单独的文章,其中探讨了一些关于我希望如何在 DevTools 中进行 CSS 嵌套的建议。

结论

CSS 嵌套是一项主要功能,它将增强我们编写 CSS 的方式。目前,可以使用嵌套,但您需要小心观众,因为支持仍然是新的。

我希望你学到了一些有用的东西。感谢您的阅读!

翻译来自:https://ishadeed.com/article/css-nesting

链接: https://www.fly63.com/article/detial/12599

css样式大全,完整的Css样式大全(整理)

CSS样式被称为为“层叠样式表”,是一种网页制作做不可或缺的技术,是用于装饰网页,达到设计效果的一种样式语言。

css 分割线样式_css实现文章分割线的多种方法总结

这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法:单个标签实现分隔线、巧用背景色实现分隔线、inline-block实现分隔线、浮动实现分隔线、利用字符实现分隔线

原生js获取、添加、修改_非行间css样式

在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。

css常用样式整理_css属性大全

css常用样式有哪些?这篇文章整理如下内容:字体属性(font)、 常用字体 (font-family)、背景属性 (background)、区块属性 (Block)、方框属性 (Box)、边框属性 (Border)、列表属性 (List-style)、定位属性 (Position)、CSS文字属性

CSS层叠样式表

层叠样式表,用来表现HTML或者XML等文件样式的计算机语言。网页表现与内容分离的样式设计语言,能够对网页中对象排版进行像素级精确控制,几乎支持所有字体字号

如何用自己喜欢的 CSS 风格重置网站的样式

许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式,我也一样。在本文中,我会与你分享我自己的 CSS reset 项目(除了 Normalize.css 之外我还使用它们)。

css单行截断和多行截断问题

多行截断有好几种方法,可以直接使用float方法,方便自定义样式及监听事件,并且兼容性好,是暂时最完美的解决方案。就是略复杂,不过网上有可以直接拿来用哦~

引入CSS样式的三种方式

行内式:该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。内嵌式<style>标记一般位于<head>标记中的<title>标记之后,也可以把它放在HTML文档的任何地方。

整理一些少用但又实用的 CSS 样式

什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式,input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色

vue用v-html加载渲染,里面的内容样式不生效

需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。解决方法有2个:coped属性导致css仅对当前组件生效

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!