偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

原生CSS嵌套使用,你學(xué)明白了嗎?

開(kāi)發(fā) 前端
CSS嵌套是一個(gè)重要的功能,它將增強(qiáng)我們編寫(xiě)CSS的能力。目前使用嵌套是可行的,但需要注意受眾情況,因?yàn)槟壳皩?duì)支持程度仍然較新。

本文翻譯自 CSS Nesting,作者:Ahmad Shadeed, 略有刪改。

如果你是一個(gè)前端開(kāi)發(fā)人員,那么你應(yīng)該使用過(guò)CSS預(yù)處理器以及預(yù)處理器中的嵌套特性。它一直是一個(gè)受歡迎的功能,我一直都在使用CSS預(yù)處理器。

今年所有的主流瀏覽器都支持原生CSS嵌套:Chrome、Firefox和Safari。這是一個(gè)重要的CSS功能,這將使編寫(xiě)CSS更加容易。在本文中我將記錄到目前為止我所學(xué)到的關(guān)于CSS嵌套的知識(shí),并與您分享我的發(fā)現(xiàn),包括使用案例和示例。

介紹

CSS嵌套是許多開(kāi)發(fā)人員期待已久的功能之一。我們?cè)?jīng)依賴于CSS預(yù)處理器,如Sass或Less。讓我們來(lái)回顧一下以前的做法:

請(qǐng)看下面的例子。我們有一個(gè)圖標(biāo)嵌套在選擇器.nav__item中。

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

以上是一個(gè)Sass語(yǔ)法的代碼。編譯后,它在瀏覽器中看起來(lái)像下面這樣:

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

使用原生CSS嵌套,相同的CSS將按原樣工作。這里有一個(gè)圖,顯示了原生CSS嵌套和瀏覽器DevTools之間的比較。

圖片圖片

請(qǐng)注意瀏覽器顯示CSS的方式與CSS代碼中的顯示方式幾乎一致。

如果這個(gè)CSS是用Sass編譯的,瀏覽器會(huì)顯示如下:

圖片圖片

CSS嵌套的好處

在我看來(lái),嵌套 CSS 有一些很合理的理由,使其變得有用:

  • 更容易閱讀CSS
  • 風(fēng)格一致
  • 確定特定樣式的作用域
  • 對(duì)沒(méi)有類(lèi)或ID的HTML元素添加樣式

CSS嵌套規(guī)則

為了讓你了解CSS嵌套,我將嘗試提供不同CSS問(wèn)題的案例,以及嵌套如何幫助解決這些問(wèn)題。

首先你需要學(xué)習(xí) &符號(hào),  有多數(shù)情況下,這個(gè)符號(hào)是必要的。

嵌套沒(méi)有類(lèi)或ID的元素

圖片圖片

在這個(gè)例子中,<a>元素是通過(guò).nav__item設(shè)置樣式。要使CSS有效,使用&符號(hào)是可選的。

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

/* 等同于 */
.nav__item a {
}

您也可以選擇不使用&符號(hào):

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

/* 等同于 */
.nav__item a {
}

請(qǐng)注意這是一個(gè)最近的更新,被稱為寬松的CSS嵌套。它適用于最新的Chrome Canary和Safari技術(shù)預(yù)覽版。

使用類(lèi)嵌套元素

圖片圖片

以前面的例子為例,但假設(shè)<a>元素有一個(gè)HTML類(lèi)。

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

/* 等同于 */
.nav__item .link {
}

這里不需要使用&,只有類(lèi)名稱也正常生效。

嵌套CSS組合器

CSS原生嵌套的一個(gè)好處是可以使用組合器。讓我們來(lái)看一些例子。

在下面的例子中,我想選擇.nav__item的每個(gè)元素,它前面有另一個(gè)具有相同類(lèi)的元素。因此我使用了相鄰兄弟選擇器。

圖片圖片

在原生CSS嵌套中,我們可以使用&符號(hào)來(lái)模擬這種效果。請(qǐng)注意我重復(fù)使用了它兩次。

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

魔術(shù)發(fā)生在第二次重復(fù)的&。在這里瀏覽器將理解我想使用相鄰的兄弟選擇器。讓我給你看一個(gè)圖表來(lái)說(shuō)明這一點(diǎn):

圖片圖片

另一個(gè)例子是嵌套子組合器。它可以選擇元素的直接子元素。

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

嵌套示例:Active, Focus, Hover

:active、:focus和:hover是通過(guò)用戶操作激活的CSS偽類(lèi)。

圖片圖片

使用CSS嵌套,可以一次嵌套它們以避免代碼重復(fù)。讓我們以:hover為例:

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

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

使用預(yù)處理器進(jìn)行嵌套時(shí)的區(qū)別在于瀏覽器將像這樣渲染它:

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

button:focus {
  outline: solid 2px;
}

讓我們來(lái)看看原生CSS嵌套在Chrome、Safari和Firefox中是如何呈現(xiàn)的。

圖片圖片

嵌套示例:Post Content

第一個(gè)嘗試CSS嵌套的例子之一是對(duì)帖子的正文內(nèi)容設(shè)置樣式。想象一下,一篇文章有正文標(biāo)題、文本、圖像、引用等等。

圖片圖片

標(biāo)題

我們傾向于像下面這樣設(shè)計(jì)標(biāo)題:

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  /* styles here */
}

使用CSS嵌套,它更簡(jiǎn)單:

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

我們也可以使用:is()選擇器來(lái)做同樣的事情。

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

段落元素

一個(gè)常見(jiàn)的情況是設(shè)置段落內(nèi)部的鏈接樣式。在這種情況下,CSS的嵌套功能非常好用。

.post-content {
  & p {
    color: var(--color-black);

    & a {
      font-weight: bold;
      text-decoration: underline;
    }
  }
}

鏈接可能也需要懸?;蚪裹c(diǎn)效果。

.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 */
    }
  }
}

帖子圖片

帖子圖包含一個(gè)圖像和一個(gè)可選的<figcaption>來(lái)顯示圖像的描述。

圖片圖片

在我的示例中,如果<figure>有標(biāo)題,我需要對(duì)它進(jìn)行不同的樣式設(shè)置??梢酝ㄟ^(guò)嵌套CSS :has() 實(shí)現(xiàn)。

.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 */
    }
  }
}

文章列表

圖片圖片

我需要為所有列表項(xiàng)添加邊框,除了最后一個(gè)。為此,我使用了:not()選擇器。

.post-content {
  li {
    &:not(:last-child) {
      border-bottom: 1px solid;
    }
  }
}

要使用:not(),我們需要在它前面附加一個(gè)&符號(hào)。

自定義標(biāo)題間距

如果<h3>和<h4>之后是代碼片段,我需要減少它們下方的間距。

圖片圖片

.post-content {
  & h3 + [class*="language-"],
  & h4 + [class*="language-"] {
    margin-top: 0.5rem;
  }
}

嵌套示例:卡片組件

我將演示一個(gè)簡(jiǎn)單的卡片組件,它使用CSS嵌套來(lái)實(shí)現(xiàn)所需的樣式。

圖片圖片

假設(shè)有一個(gè)默認(rèn)或基本樣式的.card元素,我將繼續(xù)演示CSS嵌套的使用。

.card {
  /* default card styles */
}

如果容器寬度大于400px,我希望卡片成為一個(gè)Flex容器。

.card {
  /* default card styles */

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

嵌套示例:表單輸入

一種常見(jiàn)的情況是對(duì)輸入的占位符進(jìn)行樣式設(shè)置。問(wèn)題是每個(gè)瀏覽器都有自己的前綴。

圖片圖片

由于前綴樣式需要一個(gè)雙冒號(hào),我們需要使用與號(hào)&,否則樣式將中斷。

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嵌套時(shí)發(fā)現(xiàn)的錯(cuò)誤

使用不帶&號(hào)的通用選擇器

假設(shè)我們有一張卡片,我們想選擇其中的所有元素。使用CSS原生嵌套,這應(yīng)該可以工作:

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

我發(fā)現(xiàn)這在Chrome穩(wěn)定版中不起作用,但在Chrome Canary 121、Safari 17.1和Firefox 119中工作正常。

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

使用不帶&號(hào)的自定義屬性

在這個(gè)問(wèn)題中,選擇一個(gè)不帶&號(hào)的自定義屬性將不會(huì)呈現(xiàn)預(yù)期的結(jié)果。

.card {
  [data-type="featured"] {
    /* styles here */
  }
}

我發(fā)現(xiàn)這在Chrome穩(wěn)定版中不起作用,但在Chrome Canary 121、Safari 17.1和Firefox 119中工作正常。

為了解決這個(gè)問(wèn)題,我們需要附加一個(gè)&符號(hào):

.card {
  &[data-type="featured"] {
    /* styles here */
  }
}

這兩個(gè)bug都在Chrome Canary中的寬松CSS嵌套版本中得到了修復(fù)。

檢測(cè)CSS嵌套支持

可以使用@supports來(lái)檢查CSS嵌套支持。在我們的例子中,我們想檢查瀏覽器是否識(shí)別&可以使用以下代碼。

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

對(duì)我來(lái)說(shuō),現(xiàn)在還在使用PostCSS嵌套插件,它將原生CSS嵌套編譯為普通CSS。一旦它可以安全使用后,就可以不再使用插件了。

結(jié)論

CSS嵌套是一個(gè)重要的功能,它將增強(qiáng)我們編寫(xiě)CSS的能力。目前使用嵌套是可行的,但需要注意受眾情況,因?yàn)槟壳皩?duì)支持程度仍然較新。

責(zé)任編輯:武曉燕 來(lái)源: 南城大前端
相關(guān)推薦

2022-10-24 20:25:40

云原生SpringJava

2022-10-08 00:24:40

嵌套事務(wù)加入事務(wù)事務(wù)

2020-12-17 08:39:36

Css前端html

2022-12-30 08:35:00

2023-12-06 08:28:44

禮物系統(tǒng)用例圖

2023-12-28 08:43:28

前端算法搜索

2022-04-07 11:15:22

PulseEventAPI函數(shù)

2024-01-08 20:05:32

2022-10-19 08:19:32

動(dòng)態(tài)基線預(yù)警

2023-12-08 08:38:15

EventLoopAPI瀏覽器

2022-10-10 18:38:56

inert屬性鍵盤(pán)

2023-01-27 09:14:35

CSS原生嵌套

2015-09-18 09:17:06

數(shù)據(jù)分析

2023-01-02 23:58:03

2022-10-08 08:09:13

MGRGreatSQL事務(wù)

2022-03-05 17:56:29

桌面應(yīng)用開(kāi)發(fā)

2023-06-14 08:15:34

算法合并操作Winner

2024-03-27 13:33:00

MySQLInnoDB事務(wù)

2023-12-13 12:41:59

原生CSS元素

2022-05-31 07:32:19

JDK8API工具
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)