是否有一個聰明的類命名方案，使其能夠輕松地為基于數值范圍的事物提供 CSS 樣式鉤。
一個常見的例子可能是一個進度條，它在不同的百分比下改變顏色。
它可能會以某種方式提供數字，但在 CSS 中沒有簡單的方法來說明 "紅色到 50%，然后是黃色以上，然后從 80% 以上是綠色。許多現有的解決方案只是提前用前處理器生成100行CSS，每行都針對一個單一的數字值，然后通過一個單一的類來作業，比如.progress99代表99%的進度，如果你想針對51個專案的范圍，那么你要么使用51個類，要么（49個類來反轉選擇）。
這很笨重，但對于像100這樣的小數字來說是可行的，甚至可以通過sass mixins對單一的使用情況進行一些優化，它將只使用最小的css來匹配你在特定專案中所需要的一切，并生成無聊的部分。
但是，你是否可以做一些更聰明的事情，使其能夠適用于類名中的任何數字，而只需在 CSS 方面進行更改，以控制所針對的數字范圍？
我假設如果有的話，有人已經做到了，但我也認為在大多數情況下，你可以：
a) 將邏輯添加到服務器端，并在數字高于所需值時添加一個 .success 類或其他什么東西
b) 在客戶端使用 JS 來完成上述邏輯。c) 如果與孩子的數量有關，則使用第n個孩子的選擇器來影響孩子（盡管你不能用這一招來針對父孩子）
因此，有可能它是由一個孩子組成的。
因此，可能它只是從未被認為值得努力，但它實際上是可能的嗎？
uj5u.com熱心網友回復：
免責宣告：
你可能應該使用javascript來實作你所期望的結果。如果你像你的例子那樣使用一個百分比系統，這意味著你幾乎肯定已經在頁面上使用了javascript。
CSS
你可以使用:nth-of-type(n)，例如，如果你想以第51個百分點為目標，你可以這樣做
. percentageBlock:nth-of-type(51) {
background-color: red; /* 51%的標記將是紅色 */
}
在這里你有100個div，每個都被歸類為class='percentBlock'。你也可以通過使用上面的50 n語法來做高于某個標準的值（即50%或以上）。
. percentageBlock:nth-of-type(50 n) {
background-color: blue; /* 50%的標記和它之后的所有標記都將是藍色的*/。
}
關于nth-child的說明是，它只對elements起作用，而不是對classes起作用。請參閱這里的答案以了解更多詳情。
示例：
。span class="hljs-selector-id">#wrapper {
width: 100vw;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper > div {
width: 10%;
display: inline-block;
text-align: center;
padding: 0.5rem 0;
margin: 0;
box-sizing: border-box;
}
div#wrapper > div:nth-child（1）。
div#wrapper > div:nth-child（2)
{
background-color: 紅色。
}
div#wrapper > div:nth-child（n 3）{
background-color: 綠色。
}<div id='wrapper'/span>> <div>10%</div> < div>20%</div> <div> 30%< /div><div> 40%</div>< div>50%</div> <div>60%< /div><div> 70%</div>< div>80%</div> <div>90%< /div><div>100%</div>>
</div>uj5u.com熱心網友回復：
與 "決議數字 "相比，你最好直接設定數字自定義屬性，然后在暫停的影片（或任何其他calc運算式）中利用它作為 "偏移"（animation-delay）。
通過這個方法，你可以在定義的關鍵幀之間實作平滑甚至是階梯式的過渡。
POC:
。@keyframes x {
from {
color: green;
}
50% {
color: orange;
}
75% {
text-decoration: underline;
}
to {
font-size: 3em;
text-decoration: line-through;
color: red;
}
}
p {
animation-name: x;
animation-duration: 100ms;
animation-play-state: paused;
animation-timing-function: linear;
animation-delay: calc(var1ms) 。
animation-fill-mode: both
}< input type="range" min="0" max="100"/span> value="0"/span> oninput="document. body.style.setProperty('--v',this.valueAsNumber)"/span>>
<p>/span>測驗動態
<p style="-v: 0">/span>測驗0
<p style="-v: 33">/span>Test 33
<p style="-v: 77"> Test 77轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/333735.html
標籤：
上一篇：擬合不同尺寸的影像
下一篇：在選擇中顯示所有選項，無需點擊