选择器用于第n个嵌套元素 [英] selector for nth nested elements
问题描述
我正在工作的不可确定的嵌套性的树视图，但是想定义一些嵌套规则的样式。例如，我想要第一级项目有一个特定的边框。紧接在下方的嵌套项目具有不同的边框。我有一个工作示例，但它是静态和冗长。我知道有一个更好的方法使用选择器，但我似乎不能使它的工作。这是我目前的解决方案 -
.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;
}
所以这是有效的，但显然它是一种冗长。有没有更好的方法？
在CSS中，选择器字符串主要描述嵌套结构，代数跳过选择器，使你可以在理论上做一些 .item：nth-grandchild（4）来替换你的第五个例子。
如果减少css的冗长程度对你很重要（假设你有10或甚至100级的嵌套，你正在打开），那么你真的需要考虑修改html本身，以减少需要css。这可以通过服务器端脚本（PHP等）或客户端脚本（Javascript）动态完成，或由您静态完成。您选择的方式取决于各种因素。
html修改可以是更具体的类或直接样式属性的形式，但我推荐前者。这里至少有四种方式减少css：
＃1多个类，一个指示级别
示例HTML
< div class =item L-1 >
< div class =item L-2>
< div class =item L-3>
< / div>
< / div>
< / div>
.item.L-1 {
border-left-color：＃somecolor1;
}
.item.L-2 {
border-left-color：＃somecolor2;
}
.item.L-3 {
border-left-color：＃somecolor3;
}
＃2多个类，一个指示颜色 / p>
示例HTML
< div class =item LBC-1>
< div class =item LBC-2>
< div class =item LBC-3>
< / div>
< / div>
< / div>
.item.LBC-1 {
border-left-color：＃somecolor1;
}
.item.LBC-2 {
border-left-color：＃somecolor2;
}
.item.LBC-3 {
border-left-color：＃somecolor3;
}
＃3单级名称指示级别 p>
范例HTML
< div class =item-L1>
< div class =item-L2>
< div class =item-L3>
< / div>
< / div>
< / div>
[class * =item-] {
/ *这里的项目的常见css属性* /
}
.item-L1 {
border-left-color：＃somecolor1;
}
.item-L2 {
border-left-color：＃somecolor2;
}
.item-L3 {
border-left-color：＃somecolor3;
}
每个项目的样式属性 p>
示例HTML
< div class =itemstyle =border-left-color：＃somecolor1>
< div class =itemstyle =border-left-color：＃somecolor2>
< div class =itemstyle =border-left-color：＃somecolor3>
< / div>
< / div>
< / div>
/ *无控制颜色* /
讨论最佳
通常，动态解决方案最终生成类似于＃4的html，最终使html非常详细，我个人不会推荐它。但是，这些动态解决方案不需要这样做，而是可以添加类名称，如＃1-3。
最终最好取决于什么你试图实现，你有多少控制，以及什么其他属性需要更改。就个人而言，我会避免＃2，因为它开始通过一个类名称与左边框颜色相关联的演示太多的html。对我来说，解决方案＃1或＃3将是最好的，因为它们只是设置类，帮助css知道 .item 是什么级别
当然，如果你真的处理了100个嵌套级别，那么即使是解决方案＃1- 3，你可能想要查看一些css预处理器来生成所需的100级代码。但是css输出仍然远小于使用当前方法所需的长选择器字符串。
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?
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.
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.
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 Multiple Classes, One Indicating Level
Sample HTML
<div class="item L-1">
<div class="item L-2">
<div class="item L-3">
</div>
</div>
</div>
Sample CSS
.item.L-1 {
border-left-color: #somecolor1;
}
.item.L-2 {
border-left-color: #somecolor2;
}
.item.L-3 {
border-left-color: #somecolor3;
}
#2 Multiple Classes, One Indicating Color
Sample HTML
<div class="item LBC-1">
<div class="item LBC-2">
<div class="item LBC-3">
</div>
</div>
</div>
Sample CSS
.item.LBC-1 {
border-left-color: #somecolor1;
}
.item.LBC-2 {
border-left-color: #somecolor2;
}
.item.LBC-3 {
border-left-color: #somecolor3;
}
#3 Single Class Name Indicating Level
Sample HTML
<div class="item-L1">
<div class="item-L2">
<div class="item-L3">
</div>
</div>
</div>
Sample 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 Style Properties for Each Item
Sample 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>
Sample CSS
/* none to control color */
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.
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.
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个嵌套元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
