- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了一个面包屑,您可以在此处查看代码 http://jsfiddle.net/zgx5qcsx/
我需要一个 CSS 选择器来将 &:after &:before 提供给除最后一个 li 之外的所有内容,但我无法弄清楚这一点 - 目前我笨拙地得到了:
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
}
}
}
}
关于css - 列表项的面包屑选择器,旁边有一个列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25643884/
如何使用 Meteor 实现响应式(Reactive)面包屑和铁路由器? 现在我正在寻找由 react session 变量触发的当前路径,然后在 DOM 中添加与该路由对应的每个链接与 jQuery
我想知道grails中面包屑的用法和实现。 我有一些gsp(view)页面,主页是默认页面,我有6个类别,在那6个子页面中,我需要在我的页面中显示导航路径,例如 家庭/杂货/杂货店... 家庭/财务/
我想创建一个包含一个动态项目的面包屑导航。像这样的事情: Home > Category A > Subcategory 1 > XYZ 其中“类别 A”和“子类别 1”是静态的,“XYZ”是动态的。
我想创建一个包含一个动态项目的面包屑导航。像这样的事情: Home > Category A > Subcategory 1 > XYZ 其中“类别 A”和“子类别 1”是静态的,“XYZ”是动态的。
我正在尝试在我的 React 项目中实现面包屑布局。我没有使用 router4 来呈现 URL。此时面包屑出现的样子。 Home |Test Update |Testssss |Test11111 我
我需要将树状结构更改为一些重定向(面包屑方式)。我认为问题在于我只构建了重定向的第一部分,而没有以某种方式正确回填。我一直正确地完成重定向的第一部分,但是一旦我必须重置网址,就会失败: 不想要的结果
当您使用 ul 元素来格式化面包屑(旨在获得更好的 Google 搜索结果)时,您如何定义 RDFa 标记?我问的原因是 li 元素是彼此的 sibling ,而不是 child 。我正在做类似的事情
我从 Themeisle 买了一个支持 WooCommerce 的 WordPress 模板 Zerif Pro。模板 WooCommerce 页面不显示允许用户从一个页面导航到另一个页面的面包屑。下
我想从 magento 页面中删除面包屑,尤其是产品详细信息和产品列表页面。 这可以在不更改任何代码的情况下完成吗?仅在管理面板内? 最佳答案 最好的方法是去: 系统 --> Web --> 默认页面
目前我在 vue.js 2.0 中的 BreadCrumbs 看起来像这样: Forum
我正在尝试使用 clip-path 制作面包屑路径。 #clip span { padding: 3px 20px; background-color: #666; color: whit
由于我无法在任何地方找到合适的 RDFa 示例,我想我应该在这里问一个问题。在 Google's page有使用微数据或 RDFa 标记的面包屑示例。当您单击“示例 2”旁边的“RDFa”下的“查看标
早上好,我创建了我们网站组合的前端,我需要一点帮助(头脑不合适=)) 问题是:我需要开发带有面包屑和图像的标题 我知道图像上的父类必须有 position: relative 和 childrens
我正在使用 Spring MVC + 磁贴。 现在我想构建面包屑。所以,我正在使用这个: https://github.com/pawanspace/BreadCrumb-Spring-MVC 它运行
我坚持启动 CSS 来构建面包屑,如下图链接所示。感谢您的帮助 :) 图片- http://s1015.photobucket.com/user/dbf1655/media/bred.png.html
我正在使用 ControlsFX 的 BreadcrumbBar,效果很好。我唯一的问题是将其样式设置为如下图所示。使用风景 View 时,我看到该组件只有三个类 .bread-crumb-bar、.
我想为一个页面做一种面包屑,文件夹嵌套在它的页面上。在 Sitecore 中看起来像这样: home/ main/ sub/ Folder1/ Pag
我有一个问题。我还没有找到谷歌应该如何查看产品页面面包屑的信息。尝试了一些修复,但这些都没有正常工作。例如,如果我转到产品 www.domain.com/shoes-255并在此工具中使用它 http
在 WordPress 中,我目前使用的是 Yoast's SEO Plugin显示breadcrumbs对于我的页面和帖子,在访问特定页面时工作正常。 这是我用来在我的 WordPress 模板中显
我想在用户在 magento 前端导航我自己的模块时显示面包屑,该网站已经有适当的面包屑代码,可以按照标准 magento 面包屑在其他地方使用。 我需要在我的模块中做什么来指定当前面包屑路径? 我更
我是一名优秀的程序员,十分优秀!