盧偉冰長文解析K60至尊版 對Redmi有著里程碑式的意義
在今天的Redmi后性能時代戰(zhàn)略發(fā)布會結(jié)束之后，Redmi總經(jīng)理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
2023年，CSS 迎來了一系列令人興奮的新特性，這些特性不僅增強(qiáng)了樣式和布局的能力，還提升了開發(fā)者的效率和用戶體驗(yàn)。本文將盤點(diǎn)并深入解析這些新特性，帶你領(lǐng)略 CSS 的魅力！
全文概覽：
Initial-letter
text-wrap
顏色
高級色彩空間
color-mix 函數(shù)
相對顏色語法
響應(yīng)式設(shè)計(jì)
容器大小查詢
容器樣式查詢
:has() 選擇器
更新媒體查詢
腳本媒體查詢
交互
視圖轉(zhuǎn)換
線性緩動函數(shù)
滾動結(jié)束
滾動驅(qū)動動畫
timeline-scope
離散屬性動畫
@starting-style
overlay
組件
Popover
選擇框中的分隔線
:user-valid 和 :user-invalid
獨(dú)占式手風(fēng)琴
首先來了解一下核心 CSS 語言和功能的更新。
Chrome 111 增加了對三角函數(shù) sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 的支持，使其適用于所有主流引擎。這些函數(shù)對于動畫和布局來說非常有用。例如，現(xiàn)在可以更輕松地在以所選中心為中心的圓圈上布置元素。
瀏覽器支持：
nth-*選擇器借助:nth-child()偽類選擇器，可以按索引選擇 DOM 中的元素。可以使用 An+B 微語法精確控制要選擇哪些元素。
默認(rèn)情況下，:nth-*()偽類會考慮所有子元素。從 Chrome 111 開始，可以選擇將選擇器列表傳遞給:nth-child()和:nth-last-child()。這樣就可以在 An+B 執(zhí)行操作之前預(yù)先過濾子項(xiàng)列表。
在下面的演示中，通過使用 of .small 對小玩偶進(jìn)行預(yù)過濾，3n+1 邏輯僅應(yīng)用于它們。使用下拉菜單可動態(tài)更改所使用的選擇器。
瀏覽器支持：
Chrome 118 增加了對 @scope 的支持，它可以將選擇器的范圍限定為文檔的特定子樹。借助作用域樣式，可以非常具體地選擇元素，而無需編寫過于具體的選擇器或?qū)⑺鼈兣c DOM 結(jié)構(gòu)緊密耦合。
限定作用域的子樹由作用域根和可選的作用域限制定義。
@scope (.card) { … } /* scoping root */@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/放置在作用域塊內(nèi)的樣式規(guī)則僅針對劃分出的子樹中的元素。例如，以下作用域樣式規(guī)則僅針對位于.card元素和由[data-component]選擇器匹配的任何嵌套組件之間的<img>元素。
@scope (.card) to ([data-component]) { img { … }}瀏覽器支持：
在 CSS 原生支持嵌套之前，每個選擇器都需要單獨(dú)顯式地聲明。這會導(dǎo)致重復(fù)、樣式表龐大和分散的作者體驗(yàn)。現(xiàn)在，選擇器可以繼續(xù)并將相關(guān)的樣式規(guī)則分組在一起。
dl { /* dt */ dt { /* dl dt */ } dd { /* dl dd */ }}dt { /* dt */}dl dt { /* dl dt */}dl dd { /* dl dd */}嵌套可以減少樣式表的大小，減少重復(fù)選擇器的開銷，并集中組件樣式。最初發(fā)布的語法有一個限制，需要在各個地方使用 &，但自那時起，隨著嵌套語法的放寬更新，這一限制已經(jīng)被解除。
瀏覽器支持：
借助 CSS subgrid 可以創(chuàng)建更復(fù)雜的網(wǎng)格，并在子布局之間實(shí)現(xiàn)更好的對齊。它允許內(nèi)部網(wǎng)格采用外部網(wǎng)格的行和列作為自己的行和列，通過在網(wǎng)格行或列中使用subgrid作為值。
子網(wǎng)格特別適用于將兄弟元素對齊到彼此的動態(tài)內(nèi)容。
瀏覽器支持：
2023 年，網(wǎng)頁排版取得了一些重要更新。其中一個特別好的漸進(jìn)增強(qiáng)是text-wrap屬性，該屬性可以在瀏覽器中進(jìn)行排版布局調(diào)整，而無需額外的腳本。告別尷尬的行長度，體驗(yàn)更具可預(yù)測性的排版！
在 2023 年初的 Chrome 110 中引入的initial-letter屬性是一個小而強(qiáng)大的CSS功能，它用于設(shè)置首字母的排版樣式。可以將字母放置在下沉或抬高的狀態(tài)下。該屬性接受兩個參數(shù)：第一個參數(shù)用于控制字母下沉到相應(yīng)段落的深度，第二個參數(shù)用于將字母抬高多少，可以同時使用這兩個參數(shù)。
p { font-size: 2rem; max-width: 36ch; color: var(--tangerine); background: white; &::first-letter { initial-letter: 3 2; font-weight: 800; padding-right: 1rem; background: linear-gradient( to right, var(--razzmatazz), var(--goldenyellow) ); color: transparent; -webkit-background-clip: text; }}效果如下：
瀏覽器支持：
作為開發(fā)人員，我們可能無法確定標(biāo)題或段落的最終大小、字體大小，甚至語言。瀏覽器提供了所有文本換行所需的變量，這些變量對于有效和美觀的文本處理非常重要。由于瀏覽器了解所有因素，比如字體大小、語言和分配的區(qū)域，它成為處理高級和高質(zhì)量文本布局的絕佳選擇。
這就是兩種全新的文本換行技術(shù)發(fā)揮作用的時刻，它們被命名為balance和pretty。balance值的目的是創(chuàng)建和諧的文本塊，而pretty則致力于防止孤立的字符并確保連字符的健康使用。在過去，這兩項(xiàng)任務(wù)通常需要手動完成，但現(xiàn)在可以將它們交給瀏覽器來處理，并使其適應(yīng)任何翻譯語言。
2023 年是 Web 平臺的色彩革新之年。借助全新的色彩空間和功能，實(shí)現(xiàn)了動態(tài)色彩主題，可以為用戶打造更生動、豐富的主題，并且還可以實(shí)現(xiàn)個性化定制！
在 2023 年，我們擁有了全新的顏色、更多的顏色、新的色彩空間、色彩函數(shù)和新的功能。
現(xiàn)在，CSS 和顏色可以做到以下事情：
Oklch或Display P3等顏色語法。color-mix()混合顏色。通過 color-mix 函數(shù)僅可以混合白色或黑色到一種顏色，還可以混合透明度，并且可以在選擇的任何顏色空間中完成所有這些操作，它同時具有基本顏色特性和高級顏色特性。
可以將color-mix()視為漸變過程中的一個時間點(diǎn)，該漸變展示了從藍(lán)色到白色的所有中間步驟，而color-mix()僅展示了其中的一個步驟。
瀏覽器支持：
相對顏色語法是與color-mix()相輔相成的一種方法，用于創(chuàng)建顏色變體。它比color-mix()更強(qiáng)大，但也是一種不同于傳統(tǒng)顏色處理的策略。color-mix()可以混入白色以減輕顏色的深淺程度，而相對顏色語法則提供了對亮度通道的精確訪問，并可以利用calc()函數(shù)以編程方式降低或增加亮度。
相對顏色語法允許對顏色進(jìn)行相對和絕對的操作。相對變化是指使用calc()函數(shù)對飽和度或亮度的當(dāng)前值進(jìn)行修改。絕對變化是指將通道值替換為全新的值，例如將不透明度設(shè)置為50%。這種語法為各種主題和實(shí)時變體提供了實(shí)用的工具。
2023 年，響應(yīng)式設(shè)計(jì)邁向了新的高度。這一具有里程碑意義的年份帶來了創(chuàng)新的功能，顛覆了傳統(tǒng)的構(gòu)建響應(yīng)式網(wǎng)頁體驗(yàn)的方式，并引領(lǐng)了基于組件的響應(yīng)式設(shè)計(jì)模型的新潮流。容器查詢和:has()的完美結(jié)合，使得組件能夠根據(jù)其父元素的大小以及任何子元素的存在或狀態(tài)，靈活地適應(yīng)并展現(xiàn)出相應(yīng)的樣式。這意味著我們現(xiàn)在可以將頁面級的布局與組件級的布局分離開來，并且只需編寫一次邏輯，便可以在任何地方重復(fù)使用組件！
與使用視口的全局大小信息來應(yīng)用CSS樣式不同，容器查詢支持在頁面內(nèi)查詢父元素。這意味著組件可以以動態(tài)方式在多個布局和多個視圖中進(jìn)行樣式設(shè)置。2月14日，所有現(xiàn)代瀏覽器都穩(wěn)定支持了容器大小查詢。
要使用此功能，首先在要查詢的元素上設(shè)置容器，然后類似于媒體查詢，使用@container和大小參數(shù)來應(yīng)用樣式。除了容器查詢，還可以獲得容器查詢的大小。在以下示例中，容器查詢大小cqi（表示內(nèi)聯(lián)容器的大小）用于調(diào)整卡片標(biāo)題的大小。
瀏覽器支持：
在 Chrome 111 中，樣式查詢以部分實(shí)現(xiàn)的形式出現(xiàn)。借助樣式查詢功能，可以在使用@container style()時查詢父元素上自定義屬性的值。例如，檢查自定義屬性是否存在，或者是否被設(shè)置為特定值，如@container style(--rain: true)。
盡管樣式查詢在某種程度上與在CSS中使用類名相似，但樣式查詢具有其獨(dú)特的優(yōu)勢。首先，使用樣式查詢，可以在CSS中根據(jù)需要更新偽狀態(tài)的值。此外，未來的版本將支持查詢數(shù)值范圍來確定應(yīng)用的樣式，例如style(60 <= --weather <= 70)，并且可以基于屬性-值對設(shè)置樣式，例如style(font-style: italic)。
瀏覽器支持：
在過去的20年里，開發(fā)者們一直期待在CSS中加入“父選擇器”。隨著在 Chrome 105 中引入:has()選擇器，這一愿望終于得以實(shí)現(xiàn)。例如，使用.card:has(img.hero)將選擇那些包含英雄圖像子元素的.card元素。
.card:has(.card__media) { grid-template-areas: "title" "blurb" "author" "media"; padding-bottom: 0; --color: #6300ff;}
由于:has()接受一個相對選擇器列表作為參數(shù)，因此可以選擇多個元素，不僅可以沿著DOM樹向上選擇，還可以進(jìn)行橫向選擇。例如，li:has(+ li:hover)將選擇當(dāng)前鼠標(biāo)懸停的<li>元素之前的<li>元素。
瀏覽器支持：
更新媒體查詢提供了一種根據(jù)設(shè)備刷新率來調(diào)整用戶界面的方法。這個功能可以報告設(shè)備的刷新率是快速、慢速還是根本沒有刷新率，這與不同設(shè)備的能力密切相關(guān)。
大部分設(shè)備可能都具備較快的刷新率，包括臺式機(jī)和大多數(shù)的移動設(shè)備。然而，一些設(shè)備如電子閱讀器和低功耗支付系統(tǒng)等可能具備較慢的刷新率。了解到設(shè)備無法處理動畫或頻繁更新的情況，意味著可以更加合理地使用電池，或者避免因?yàn)轭l繁的視圖更新而導(dǎo)致的故障。
媒體查詢腳本可以用于檢查JavaScript是否可用，這對漸進(jìn)增強(qiáng)非常有用。在引入這個媒體查詢之前，檢測JavaScript是否可用的策略是在HTML中放置一個nojs類，并使用JavaScript將其移除。現(xiàn)在，由于CSS有了一種檢測JavaScript并相應(yīng)調(diào)整的方式，因此可以移除這些腳本。
通過使用腳本媒體查詢，可以在沒有JavaScript可用的情況下，根據(jù)系統(tǒng)偏好進(jìn)行網(wǎng)站主題的切換。此外，還可以考慮一個切換組件，當(dāng)JavaScript可用時，該組件可以使用手勢滑動進(jìn)行切換，而不僅僅是簡單地切換開關(guān)的狀態(tài)。這樣，在腳本可用的情況下，可以提供更優(yōu)化的用戶體驗(yàn)；而在腳本禁用的情況下，仍然能夠提供基本而有意義的體驗(yàn)。
今年，有許多令人振奮的交互功能陸續(xù)問世，這些功能使得交互的構(gòu)建和實(shí)施變得更加簡單，從而促進(jìn)了流暢的用戶體驗(yàn)和更加精致的網(wǎng)絡(luò)體驗(yàn)。
通過使用視圖轉(zhuǎn)換API，可以在單頁應(yīng)用的兩個頁面狀態(tài)之間創(chuàng)建視覺轉(zhuǎn)換。這些轉(zhuǎn)換可以是全頁面轉(zhuǎn)換，也可以是頁面上的小元素，例如添加或刪除列表中的新項(xiàng)目。
視圖轉(zhuǎn)換API的核心是document.startViewTranstion函數(shù)。只需傳遞一個更新DOM到新狀態(tài)的函數(shù)，API就會處理所有細(xì)節(jié)。它通過獲取先前和后續(xù)快照，然后在兩者之間進(jìn)行過渡來實(shí)現(xiàn)這一點(diǎn)。可以使用CSS來控制要捕獲的內(nèi)容，并可選擇自定義這些快照的動畫方式。
瀏覽器支持：
線性緩動函數(shù)是用于動畫效果的一種函數(shù)，它并非真正的“線性”（linear）函數(shù)，而是一種簡化的緩動函數(shù)，可以模擬更復(fù)雜的動畫效果。盡管這種函數(shù)的精度可能略有降低，但它的實(shí)現(xiàn)方式簡單直觀，可以方便地應(yīng)用于各種動畫效果。
在 Chrome 113 版本之前，CSS中確實(shí)無法直接創(chuàng)建反彈或彈簧等復(fù)雜的動畫效果。然而，通過使用linear()函數(shù)，開發(fā)者可以將這些復(fù)雜的緩動效果簡化為一系列的點(diǎn)，然后在這這些點(diǎn)之間進(jìn)行線性插值，從而得到一種近似的緩動效果。
原始的藍(lán)色反彈曲線被簡化為一組綠色關(guān)鍵點(diǎn)，linear()函數(shù)使用這些關(guān)鍵點(diǎn)，并在它們之間進(jìn)行線性插值。
瀏覽器支持：
許多界面都包含滾動交互，有時界面需要同步與當(dāng)前滾動位置相關(guān)的信息，或者根據(jù)當(dāng)前狀態(tài)獲取數(shù)據(jù)。在scrollend事件之前，開發(fā)者們通常采用設(shè)置超時的方式來嘗試捕捉滾動動作的結(jié)束。這種做法并不準(zhǔn)確，因?yàn)槌瑫r可能會在用戶手指仍然觸摸屏幕時被觸發(fā)。這可能導(dǎo)致用戶體驗(yàn)的不連貫，或者獲取到不準(zhǔn)確的數(shù)據(jù)。
現(xiàn)在，有了scrollend事件，開發(fā)者可以獲得一個更加精準(zhǔn)定時的方式。scrollend事件能夠在用戶滾動動作結(jié)束時立即觸發(fā)，從而判斷用戶是否仍處于手勢的中間狀態(tài)。
瀏覽器支持：
從 Chrome 115 版本開始，滾動驅(qū)動的動畫成為了一項(xiàng)令人振奮的功能。這項(xiàng)功能可以將現(xiàn)有的CSS動畫或使用Web動畫API構(gòu)建的動畫與滾動容器的滾動偏移量相結(jié)合。當(dāng)上下滾動（或在水平滾動容器中左右滾動）時，鏈接的動畫會直接響應(yīng)地前后播放。
通過使用ScrollTimeline，可以跟蹤滾動容器的總體進(jìn)度。例如，下面的演示顯示了當(dāng)滾動到頁面末尾時，文本逐個字符地顯示出來。這一優(yōu)化確保了流暢、連貫的用戶體驗(yàn)，同時允許開發(fā)者利用瀏覽器的內(nèi)置功能來實(shí)現(xiàn)復(fù)雜的效果。
使用 ViewTimeline 可以跟蹤一個元素在滾動視口中的位置。這類似于IntersectionObserver跟蹤一個元素的方式。在下面的演示中，每個圖像從進(jìn)入滾動視口開始逐漸顯示，直到位于中心位置。
滾動驅(qū)動的動畫與CSS動畫和Web動畫API的結(jié)合，可以使開發(fā)者受益于這些API帶來的所有優(yōu)勢。其中最顯著的優(yōu)勢之一是能夠在主線程之外運(yùn)行動畫。通過添加幾行額外的代碼，開發(fā)者可以讓由滾動驅(qū)動的動畫在主線程之外順暢運(yùn)行，從而避免阻塞主線程，提高應(yīng)用的響應(yīng)性和性能。
瀏覽器支持：
在通過CSS應(yīng)用滾動驅(qū)動的動畫時，查找控制滾動的機(jī)制總是沿著DOM樹向上查找，這使得它僅限于滾動祖先。然而，很多時候，需要動畫的元素并不是滾動容器的子元素，而是位于完全不同的子樹中的元素。
為了使動畫元素能夠找到非祖先元素的命名滾動時間線，可以在共享父元素上使用timeline-scope屬性。這將允許具有該名稱的定義的scroll-timeline 或 view-timeline附加到該元素，使其具有更廣泛的范圍。有了這個功能，任何共享父元素的子元素都可以使用具有該名稱的時間線。
在共享父元素上聲明timeline-scope后，滾動容器上聲明的滾動時間線可以被使用它作為其動畫時間線的元素找到。
瀏覽器支持：
2023年的另一個新功能是對離散動畫進(jìn)行動畫處理的能力。離散動畫是指屬性值在兩個或更多離散值之間變化的動畫，例如從display: none到可見狀態(tài)的動畫。從Chrome 116開始，可以在關(guān)鍵幀規(guī)則中使用display和content-visibility屬性，并在動畫的50%位置而不是0%位置過渡任何離散屬性。
這個優(yōu)化方法通過使用transition-behavior屬性中的allow-discrete關(guān)鍵字或在transition屬性中作為簡寫來實(shí)現(xiàn)。這使得開發(fā)者可以更靈活地控制離散屬性的動畫過渡，并在需要時實(shí)現(xiàn)更平滑的過渡效果。
瀏覽器支持：
通過使用@starting-style CSS規(guī)則，可以對display: none進(jìn)行動畫處理。該規(guī)則提供了一種在元素打開之前，瀏覽器可以查找的“打開前”樣式的方式。這對于創(chuàng)建入場動畫以及顯示諸如彈出框或?qū)υ捒虻仍胤浅Ｓ杏谩Ｍ瑫r，它還可以用于在創(chuàng)建新元素并希望為其添加動畫效果時。
下面的例子將一個彈出框平滑地從視口外部動畫顯示到頂層：
@starting-style { dialog[open] { translate: 0 100vh; }}
瀏覽器支持：
通過使用新的 CSS overlay 屬性，可以添加過渡效果，使具有頂層樣式的元素（例如彈出框、對話框等）能夠平滑地從頂層動畫移出。如果沒有使用過渡到overlay，元素將立即回到被裁剪、變形和覆蓋的狀態(tài)，導(dǎo)致看不到轉(zhuǎn)換發(fā)生的過程。類似地，當(dāng)在頂層元素上添加overlay屬性時，它可以使得::backdrop元素能夠平滑地動畫移出。
瀏覽器支持：
2023年對于樣式和HTML組件來說是重要的一年，其中引入了彈出框功能，并對錨點(diǎn)定位和下拉菜單樣式進(jìn)行了大量的改進(jìn)。這些組件使得構(gòu)建常見的UI模式更加容易，無需依賴額外的庫或每次都從頭開始構(gòu)建自己的狀態(tài)管理系統(tǒng)。
Popover API 可以幫助開發(fā)者構(gòu)建覆蓋在頁面上方的元素，這些元素可能包括菜單、選擇和工具提示。通過為彈出的元素添加popover屬性和id，并將其id屬性與觸發(fā)按鈕連接起來，使用popovertarget="my-popover"可以創(chuàng)建一個簡單的彈出框。Popover API 具有以下優(yōu)點(diǎn)：
z-index。<div popover role="menu" id="menu"> <button class="close-btn" popovertarget="menu" popovertargetaction="hide"> <span>?</span> <span class="sr-only">Close</span> </button> <ul> <li><a href="#">Typography</a></li> <li><a href="#">Foundations</a></li> <li><a href="#">Color</a></li> <li><a href="#">Interactions</a></li> <li><a href="#">Components</a></li> <li><a href="#">Responsive</a></li> </ul></div>
瀏覽器支持：
今年在Chrome和Safari中引入的另一個HTML的小改變是，現(xiàn)在可以在<select>元素中添加水平線元素（<hr>標(biāo)簽），以幫助視覺上分隔內(nèi)容。以前，在<select>中放置<hr>標(biāo)簽不會被渲染。但今年，Safari和Chrome都支持此功能，可以更好地在<select>元素中分隔內(nèi)容。
<select name="majors" id="major-select"> <option value="">Select a favorite feature</option> <hr> <optgroup label="Foundations"> <option value="trig">Trigonometric functions</option> <option value="nth">Complex nth-* selection</option> <option value="nesting">Nesting</option> <option value="subgrid">Subgrid</option> <option value="mq-ranges">Media query range syntax</option> </optgroup> <optgroup label="Typography"> <option value="initial-letter">Initial-letter</option> <option value="text-wrap-b-p">Text-wrap: balance / pretty</option> </optgroup> <optgroup label="Color"> <option value="color-4">CSS Color level 4</option> <option value="color-mix">Color-mix function</option> <option value="rcs">Relative color syntax</option> </optgroup> <optgroup label="Responsive Design"> <option value="cq">Size container queries</option> <option value="sq">Style container queries</option> <option value="has">:has() selector</option> </optgroup></select>
今年所有瀏覽器均穩(wěn)定支持 :user-valid 和 :user-invalid 偽類，它們的行為類似于 :valid 和 :invalid 偽類，但只有在用戶與輸入進(jìn)行了重要交互之后，才匹配表單控件。即使用戶尚未開始與頁面進(jìn)行交互，必填但是空的表單控件將匹配 :invalid。只有當(dāng)用戶更改輸入并將其保留在無效狀態(tài)時，該控件才會匹配 :user-invalid。
有了這些新的選擇器，就不再需要編寫有狀態(tài)的代碼來跟蹤用戶已更改的輸入。
input:user-valid,select:user-valid,textarea:user-valid { --state-color: green; --bg: linear-gradient(45deg in oklch, lime, #02c3ff);}input:user-invalid,select:user-invalid,textarea:user-invalid { --state-color: red; --bg: linear-gradient(15deg in oklch, #ea00ff, #ffb472);}
瀏覽器支持：
Web上常見的UI模式之一是手風(fēng)琴組件。要實(shí)現(xiàn)此模式，通常需要將幾個<details>元素組合在一起，通過視覺分組來表明它們之間的聯(lián)系。
在 Chrome 120 中，引入了一項(xiàng)新功能，即在<details>元素上支持name屬性。使用這個屬性時，具有相同名稱值的多個<details>元素會形成一個語義組合。該組合中最多只能打開一個元素：當(dāng)打開該組合中的一個**<details>**元素時，之前打開的一個將自動關(guān)閉，這種手風(fēng)琴稱為獨(dú)占式手風(fēng)琴。
<details name="my-accordion"> <summary>Summary 1</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p></details><details name="my-accordion" open> <summary>Summary 2</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p></details><details name="my-accordion"> <summary>Summary 3</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p></details>作為獨(dú)占式手風(fēng)琴的一部分的<details>元素不一定需要是兄弟元素，它們可以散布在文檔任意位置。
本文鏈接：http://www.www897cc.com/showinfo-26-41679-0.html2023 年 CSS 新特性大盤點(diǎn)
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號