Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/86.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何使第n个子项使用嵌套标记?_Html_Css - Fatal编程技术网

Html 如何使第n个子项使用嵌套标记?

Html 如何使第n个子项使用嵌套标记?,html,css,Html,Css,我试图让第n个子css处理嵌套的标记,但它似乎只对第一个标记和第二个标记有效。是否可以使其与多个级别的嵌套标记一起工作 我正在尝试将blockquote上的边框设置为偶数和奇数标记之间的不同颜色,这样用户可以更容易地可视化页面上的内容 .test:第n个子项(奇数){ 字体大小:14px; 左边框:5px实心#347bb8; } .测试:第n个孩子(偶数){ 字体大小:14px; 左边框:5px实心#000; } Lorem ipsum dolor sit amet,是一位杰出的献身者。这是

我试图让第n个子css处理嵌套的标记,但它似乎只对第一个标记和第二个标记有效。是否可以使其与多个级别的嵌套标记一起工作

我正在尝试将blockquote上的边框设置为偶数和奇数标记之间的不同颜色,这样用户可以更容易地可视化页面上的内容

.test:第n个子项(奇数){
字体大小:14px;
左边框:5px实心#347bb8;
}
.测试:第n个孩子(偶数){
字体大小:14px;
左边框:5px实心#000;
}

Lorem ipsum dolor sit amet,是一位杰出的献身者。这是一个很好的选择。拉齐亚库拉比图酒店。Integer magna nisi,faucibus commodo lacus,ullamcorper lobortis nunc。Morbi pharetra id turpis vitae Concertetur。在发酵罐里,一只猫咪在坐着。在车辆前方。佩伦茨克和亨德雷特·利奥,维塔·廷西登·利奥。利奥·波苏尔(leo posuere)的Proin、孕妇purus non、尤伊斯莫·莫里斯(euismod mauris)。智者之门的库拉比托·奎斯·康瓦利斯(Curabitur porttitor sapien quis convallis),是一种无需承受的后果。从前到后,封建主义者的身份是不存在的,而元素则是不存在的。我们是奥古斯·波特托、马克西姆斯·多洛、尤伊斯莫·尼塞尔。Mauris vehicula purus a vehicula dapibus。毛里斯-塞德卢斯节杖发酵液和马萨的生命。普通前庭直径的ultrices,连续性三色ultrices。
这里有更多的文字
这里有更多的文字

你不能<代码>:第n个子代表示“父代的第n个子代”而不是“子代的第n代”

CSS没有你要寻找的快捷方式

.test {
   /* Default (even generation)
}

:not(.test) > .test,
:not(.test) > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test > .test > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test > .test > .test > .test > .test > .test > .test {
   /* odd generation */
}

…如果需要更多的级别

您可能会有不同的想法,并使用其他技巧来实现这一点。下面是一个考虑到某些背景的示例,您只需要知道最后一个元素:

blockquote{
字体大小:14px;
左边距:30px;
左侧填充:5px;
边际上限:0;
右边距:0;
位置:相对位置;
}
blockquote:之后{
内容:“;
位置:绝对位置;
最高:100%;
高度:100vh;
左:0;
右:0;
z指数:-1;
背景:#fff;
}
.最后{
背景:#fff内容框;
}
.首先{
溢出:隐藏;
z指数:0;
背景:重复线性渐变(向右,
#000,#000 5px,
透明5px,透明35px,
#347bb8 35px,#347bb8 40px,
透明40px,透明70px);
}

Lorem ipsum dolor sit amet,是一位杰出的献身者。这是一个很好的选择。拉齐亚库拉比图酒店。Integer magna nisi,faucibus commodo lacus,ullamcorper lobortis nunc。Morbi pharetra id turpis vitae Concertetur。
在发酵罐里,一只猫咪在坐着。在车辆前方。佩伦茨克和亨德雷特·利奥,维塔·廷西登·利奥。利奥·波苏尔(leo posuere)的Proin、孕妇purus non、尤伊斯莫·莫里斯(euismod mauris)。萨皮恩·奎斯·康瓦利斯港口酒店,
text1在这里
这里是孕妇purus non,euismod mauris。萨皮恩·奎斯·康瓦利斯港口酒店,
这里是孕妇purus non,euismod mauris。萨皮恩·奎斯·康瓦利斯港口酒店,
这里是文本3

谢谢您的帮助。这解决了我的问题。我只需要3个级别,所以还不错:)