MIX Fold3包裝盒泄露 新機本月登場
小米的全新折疊屏旗艦MIX Fold3將于本月發布，近日該機的真機包裝盒在網上泄露。從圖上來看，新的MIX Fold3包裝盒在外觀設計方面延續了之前的方案，變化不大，這也是目前小米旗艦
本文翻譯自 CSS Nesting，作者：Ahmad Shadeed， 略有刪改。
如果你是一個前端開發人員，那么你應該使用過CSS預處理器以及預處理器中的嵌套特性。它一直是一個受歡迎的功能，我一直都在使用CSS預處理器。
今年所有的主流瀏覽器都支持原生CSS嵌套：Chrome、Firefox和Safari。這是一個重要的CSS功能，這將使編寫CSS更加容易。在本文中我將記錄到目前為止我所學到的關于CSS嵌套的知識，并與您分享我的發現，包括使用案例和示例。
CSS嵌套是許多開發人員期待已久的功能之一。我們曾經依賴于CSS預處理器，如Sass或Less。讓我們來回顧一下以前的做法：
請看下面的例子。我們有一個圖標嵌套在選擇器.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問題的案例，以及嵌套如何幫助解決這些問題。
首先你需要學習 &符號， 有多數情況下，這個符號是必要的。
圖片
在這個例子中，<a>元素是通過.nav__item設置樣式。要使CSS有效，使用&符號是可選的。
nav__item { & a { display: block; padding: 1.5rem 1rem; }}/* 等同于 */.nav__item a {}您也可以選擇不使用&符號：
.nav__item { a { display: block; padding: 1.5rem 1rem; }}/* 等同于 */.nav__item a {}請注意這是一個最近的更新，被稱為寬松的CSS嵌套。它適用于最新的Chrome Canary和Safari技術預覽版。
圖片
以前面的例子為例，但假設<a>元素有一個HTML類。
.nav__item { .link { display: block; padding: 1.5rem 1rem; }}/* 等同于 */.nav__item .link {}這里不需要使用&，只有類名稱也正常生效。
CSS原生嵌套的一個好處是可以使用組合器。讓我們來看一些例子。
在下面的例子中，我想選擇.nav__item的每個元素，它前面有另一個具有相同類的元素。因此我使用了相鄰兄弟選擇器。
圖片
在原生CSS嵌套中，我們可以使用&符號來模擬這種效果。請注意我重復使用了它兩次。
.nav__item { & + & { border-left: 2px solid; }}魔術發生在第二次重復的&。在這里瀏覽器將理解我想使用相鄰的兄弟選擇器。讓我給你看一個圖表來說明這一點：
圖片
另一個例子是嵌套子組合器。它可以選擇元素的直接子元素。
.nav__item { > a { padding: 1rem; }}:active、:focus和:hover是通過用戶操作激活的CSS偽類。
圖片
使用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嵌套的例子之一是對帖子的正文內容設置樣式。想象一下，一篇文章有正文標題、文本、圖像、引用等等。
圖片
我們傾向于像下面這樣設計標題：
.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原生嵌套，這應該可以工作：
.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嵌套版本中得到了修復。
可以使用@supports來檢查CSS嵌套支持。在我們的例子中，我們想檢查瀏覽器是否識別&可以使用以下代碼。
@supports selector(&) { .post-content { & h2 { /* styles here. */ } }}對我來說，現在還在使用PostCSS嵌套插件，它將原生CSS嵌套編譯為普通CSS。一旦它可以安全使用后，就可以不再使用插件了。
CSS嵌套是一個重要的功能，它將增強我們編寫CSS的能力。目前使用嵌套是可行的，但需要注意受眾情況，因為目前對支持程度仍然較新。
本文鏈接：http://www.www897cc.com/showinfo-26-38517-0.html原生CSS嵌套使用，你學明白了嗎？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 詳解JDK動態代理和CGLib動態代理
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號