設置CSS填充，以值基於屬性

這不起作用：設置CSS填充，以值基於屬性

li[depth="3"] { padding-left: calc(40px * attr(depth integer)); }

然而，這個工程：

li[depth="3"] { padding-left: calc(40px * 3); }

顯然attr(name type)不裏面calc()支持...但。

點擊此處瞭解詳情：On attr() and calc()

有什麼辦法來取代使用CSS以下CSS，對於屬性depth的所有整數值的作品？

li[depth="2"] { padding-left: 40px; } 
li[depth="3"] { padding-left: 80px; } 
li[depth="4"] { padding-left: 120px; }

來源

2016-11-20 Leftium

「attr（）函數可以用於任何CSS屬性，但支持除內容之外的其他屬性是實驗性的。」 – Terry

我感覺這個問題導致了一個解決另一個問題的問題，儘管我當然可能是錯的;如果我是對的，但是，你能解釋一下你最初試圖用這種方法解決的問題嗎？ –

@DavidThomas：我對其他解決方案持開放態度（我使用平面列表而不是嵌套列表，因爲我找不到處理嵌套列表的虛擬滾動庫。）「深度」是「li」需要縮進。深度值取自正在渲染的樺木輪廓。再看那在這個演示左側呈現的清單：https://leftium.github.io/Todo.taskpaper/ – Leftium

沒有特殊的CSS，可以實現這一點 - 通常，最好避免在DOM引用風格/佈局規則。 CSS flexbox model可能證明對此有用，以允許元素根據其中存在多少來進行大小設置。

如果您需要使用您指定的CSS路由，像Sass這樣的預處理器可以讓您使用循環自動完成所有代碼的編寫（SCSS語法中的示例） - 但請注意生成的最終.css文件將編制出所有規則。另外請注意，這裏的範圍是有限的 - 你可以調整20任何數量，但它不會無限工作（雖然我認爲它甚至不會達到20例如）。

@for $i from 1 to 20 { 
    li[depth="#{$i}"] { padding-left: #{($i - 1) * 40px}; } 
}

來源

2016-11-20 18:15:25

'scss'不在OP中，您的代碼在範圍定義中受到限制。 – Hitmands

設置CSS填充，以值基於屬性

回答

相關問題