Css 列表项的面包屑选择器,旁边有一个列表项
我创建了一个面包屑你可以在这里看到代码 我需要一个CSS选择器将&:after&:before赋予除最后一个li之外的所有li,但我无法解决此问题-目前我笨拙地得到:Css 列表项的面包屑选择器,旁边有一个列表项,css,sass,css-selectors,Css,Sass,Css Selectors,我创建了一个面包屑你可以在这里看到代码 我需要一个CSS选择器将&:after&:before赋予除最后一个li之外的所有li,但我无法解决此问题-目前我笨拙地得到: li:first-child, li:first-child + li 这并不理想,因为随着更多步骤的增加,我不得不修改 如有任何建议,将不胜感激 .breadcrumb { width: auto; margin: 0; padding: 0; list-style: none; border-bottom:
li:first-child,
li:first-child + li
这并不理想,因为随着更多步骤的增加,我不得不修改
如有任何建议,将不胜感激
.breadcrumb
{
width: auto;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid grey;
background-color: light-grey;
li
{
float: left;
margin: 0;
width: 33.33333333%;
a
{
&:link, &:visited
{
position: relative;
width: auto;
display: block;
// border-right: 1px solid grey;
@include x-rem(padding, 20px 20px 20px 50px);
text-decoration: none;
span
{
background-color: orange;
color: white;
}
}
}
}
li:first-child,
li:first-child + li
{
a
{
&:after
{
position: absolute;
top: 0;
right: -40px;
display: block;
content: "";
border-top: 29px solid transparent;
border-left: 30px solid light-grey;
border-bottom: 29px solid transparent;
border-right: 10px solid transparent;
z-index: 2;
}
&:before
{
position: absolute;
top: 0;
right: -41px;
display: block;
content: "";
border-top: 29px solid transparent;
border-left: 30px solid grey;
border-bottom: 29px solid transparent;
border-right: 10px solid transparent;
z-index: 1;
}
&.breadcrumb--active
{
background-color: white;
&:after
{
border-left: 30px solid white;
}
}
}
}
}
正如我之前所说的
li+li
与li:first child+li
相同(当然,如果你愿意,你可以在你的li里面做&+li
)。这是我的解决方案——我换了选择器,把所有的东西都对齐到左边
.breadcrumb
{
width: auto;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid grey;
background-color: lightgray; // watch out it's lightgray not light-grey :)
li
{
float: left;
margin: 0;
width: 33.33333333%;
a
{
&:link, &:visited
{
position: relative;
width: auto;
display: block;
// border-right: 1px solid grey;
@include x-rem(padding, 20px 20px 20px 50px);
text-decoration: none;
span
{
background-color: orange;
color: white;
}
}
&.breadcrumb--active //changed
{
background-color: white;
&:after
{
border-left: 30px solid grey;
z-index: 1;
}
}
}
}
li + li //changed
{
a
{
&:after
{
position: absolute;
top: 0;
left: 0; //changed
display: block;
content: "";
border-top: 29px solid transparent;
border-left: 30px solid lightgray;
border-bottom: 29px solid transparent;
border-right: 10px solid transparent;
z-index: 1; //changed
}
&:before
{
position: absolute;
top: 0;
left: -1px; //changed
display: block;
content: "";
border-top: 29px solid transparent;
border-left: 30px solid white; //changed
border-bottom: 29px solid transparent;
border-right: 10px solid transparent;
z-index: 2; //changed
}
}
}
}
您可以使用
last child
并将display
设置为none
。或者你可以使用li:not(:last child)
如果网站是公开的,我也建议你检查一下,确保CSS最有可能适合目标受众。对于信息li+li,与li:first child+li相同,如果你把样式放在左边而不是右边,你可以把样式放在每个人的后面