第 n 个嵌套元素的选择器

问题描述

我正在研究无法确定可嵌套性的树形视图，但想定义一些嵌套规则以进行样式设置.例如，我希望第一级项目具有特定的边框.紧挨在下方的嵌套项目具有不同的边框.我有一个工作示例，但它是静态且冗长的.我知道必须有更好的方法使用选择器，但我似乎无法让它发挥作用.这是我目前的解决方案-

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模板网！