問題描述

我正在研究無法確定可嵌套性的樹形視圖，但想定義一些嵌套規則以進行樣式設置.例如，我希望第一級項目具有特定的邊框.緊挨在下方的嵌套項目具有不同的邊框.我有一個工作示例，但它是靜態且冗長的.我知道必須有更好的方法使用選擇器，但我似乎無法讓它發揮作用.這是我目前的解決方案-

I am working on a tree view of undeterminable nestability, but would like to define some nested rules for styling. For example, I want the first level item to have a particular border. Nested items immediately underneath to have a different border. I have a working example, but it is static and verbose. I know there has to be a better way using selectors, but I can't seem to make it work. Here is my current solution-

.item {
    border-left-color: #somecolor1;
}
.item > .item {
    border-left-color: #somecolor2;
}
.item > .item > .item {
    border-left-color: #somecolor3;
}
.item > .item > .item > .item {
    border-left-color: #somecolor4;
}
.item > .item > .item > .item > .item {
    border-left-color: #somecolor5;
}

所以這行得通，但顯然它有點冗長.有沒有更好的辦法?

So this works, but obviously it is kind of verbose. Is there a better way?

推薦答案

在 CSS 中，選擇器字符串主要描述嵌套結構，目前不存在任何分代跳過選擇器，因此理論上您可能會執行類似 的操作.item:nth-grandchild(4) 替換您的第五個示例.

In CSS the selector string is largely describing the nesting structure, and there does not currently exist any generational skipping selectors such that you might theoretically do something like .item:nth-grandchild(4) to replace your fifth example.

如果減少 css 的冗長對您來說非常重要(假設您有多達 10 甚至 100 級的嵌套正在打開)，那么您真的需要考慮修改 html 本身以減少需要CSS.這可以通過服務器端腳本(PHP 等)或客戶端腳本(Javascript)動態完成，或者由您靜態完成.您選擇哪種方式取決于多種因素.

If reducing verbosity of your css is of high importance to you (lets say you have up 10 or even 100 levels of nesting you are switching on), then really you need to look into modifying the html itself in order to reduce the css needed. That can be done dynamically via server-side scripting (PHP, etc.), or client-side scripting (Javascript), or statically by you. Which way you choose will depend on a variety of factors.

html修改可以是更具體的類或者直接樣式屬性的形式，但我推薦前者.這里至少有四種減少 css 的方法:

The html modification can be in the form of more specific classes or direct style properties, but I recommend the former. Here are at least four ways css would be reduced:

#1 多個類，一個指示級別

示例 HTML

<div class="item L-1">
 <div class="item L-2">
  <div class="item L-3">
  </div>
 </div>
</div>

示例 CSS

.item.L-1 {
    border-left-color: #somecolor1;
}
.item.L-2 {
    border-left-color: #somecolor2;
}
.item.L-3 {
    border-left-color: #somecolor3;
}

#2 多個類，一種指示顏色

示例 HTML

<div class="item LBC-1"> 
 <div class="item LBC-2">
  <div class="item LBC-3">
  </div>
 </div>
</div>

示例 CSS

.item.LBC-1 {
    border-left-color: #somecolor1;
}
.item.LBC-2 {
    border-left-color: #somecolor2;
}
.item.LBC-3 {
    border-left-color: #somecolor3;
}

#3 單個類名表示級別

示例 HTML

<div class="item-L1"> 
 <div class="item-L2">
  <div class="item-L3">
  </div>
 </div>
</div>

示例 CSS

[class *= "item-"] {
    /* common css properties for the items goes here */
}

.item-L1 {
    border-left-color: #somecolor1;
}
.item-L2 {
    border-left-color: #somecolor2;
}
.item-L3 {
    border-left-color: #somecolor3;
}

#4 每個項目的樣式屬性

示例 HTML

<div class="item" style="border-left-color: #somecolor1"> 
 <div class="item" style="border-left-color: #somecolor2">
  <div class="item"  style="border-left-color: #somecolor3">
  </div>
 </div>
</div>

示例 CSS

/* none to control color */

最佳"的討論

通常動態解決方案最終會生成類似于 #4 的 html，這最終會使 html 變得非常冗長，我個人不建議這樣做.但是，那些動態解決方案不需要這樣做，而是可以添加類名，如 #1-3.

Discussion of "Best"

Often dynamic solutions end up producing html like that of #4, which ends up making the html very verbose, and I personally would not recommend it. However, those dynamic solutions do not need to do that, but could instead add class names like #1-3.

最終什么是最好的"在很大程度上取決于您想要實現的目標、您擁有多少控制權以及其他哪些屬性也需要更改.就個人而言，我也會避免使用 #2，因為它通過將類名與左邊框顏色"關聯起來，開始將演示文稿與 html 聯系在一起.對我來說，解決方案 #1 或 #3 是最好的，因為它們只是設置類來幫助 css 了解 .item 處于什么級別"，然后允許針對該級別進行特定定位任何你可能需要它的水平.

What is ultimately "best" depends a lot on what you are trying to achieve, how much control you have, and what other properties need changing as well. Personally, I would avoid #2 as well, because it begins to tie presentation too much to html by having a class name associated with the "left border color." To me, solution #1 or #3 would be best, as those are simply setting classes that help the css to know what "level" the .item is at, which then allows for specific targeting to that level for anything you may need it for.

當然，如果您真的要處理 100 個嵌套級別，那么即使對于解決方案 #1-3，您也可能需要研究一些 css 預處理器來生成所需的 100 個級別的代碼.但是 css 輸出仍然遠遠少于使用當前方法所需的長選擇器字符串.

Of course, if you were really dealing with 100 nested levels, then even for solutions #1-3, you might want to look into some css preprocessor to generate the 100 levels of code needed. But the css output would still be far less than the long selector strings needed using the current method you are doing.

這篇關于第 n 個嵌套元素的選擇器的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！