在类似于链接的div中设置样式文本

Question

我有以下面包屑代码。

＆＃13;

＆＃13;

#breadcrumb{
  margin-bottom: 10px;
  margin-top: 10px;
  display: block;}

#breadcrumb a{background:#FFFFFF;
  padding:4px;
  margin-right:10px;}

＆＃13;

<div id="breadcrumb">
  <a href="index.html">Home</a><a href="parent-catagory.html" title="Parent Catagory">Parent Catagory</a>Child Catagory
</div>

＆＃13;

＆＃13;

＆＃13;

我称之为“家庭＆＃39;和父母的Catagory＆＃39;链接有纯色背景。我想为'Catagory＆＃39;文本与两个链接的颜色略有不同的固体背景。面包屑的所有三个元素之间应该有间隙，不应该接触。

＆＃39; Child Catagory＆＃39;文字没有被<span>包围，所以我不确定如何实现这一点。

如果我在周围添加样式＆＃39;面包屑＆＃39; div，链接之间的空间受到影响。

我需要设置＆＃39; breadcrumb＆＃39;中的文字样式。 div，不是div本身而不是链接。

Answer 1

这是一种糟糕的hacky方法，不应该使用。我强烈建议在一个范围内包裹面包屑的最后一位并设置范围。

#breadcrumb {
  background:red;
  display:inline-block;
}
#breadcrumb a {
  background:green;
  display:inline-block;
  position:relative;
}
#breadcrumb a:after {
  content: "";
  background: white;
  height: 1.5em;
  position: absolute;
  top: 0;
  right: -5px;
  width: 5px;
}

<div id="breadcrumb">
  <a href="index.html">Home</a>
  <a href="parent-catagory.html" title="Parent Catagory">Parent Catagory</a>
  Child Catagory
</div>

修改

如果您知道最后一个元素的宽度，则可以执行以下操作：

#breadcrumb:after {
  background: red;
  content: "";
  height: 1.5em;
  width: 99px;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
#breadcrumb {
  overflow: hidden;
  display: inline-block;
  position: relative;
  margin-bottom: 10px;
  margin-top: 10px;
}

#breadcrumb a{
  background:#ccc;
  padding:4px;
  margin-right:10px;
}

<div id="breadcrumb">
  <a href="index.html">Home</a><a href="parent-catagory.html" title="Parent Catagory">Parent Catagory</a>Child Catagory
</div>

Answer 2

选项1 - 编辑HTML

问题是：你能编辑HTML吗？

最好的办法是编辑HTML并在＆＃34; Child Category＆＃34;中添加一个周围的div。项目，然后设计它。

<div id="breadcrumb">
    <a href="index.html">Home</a>
    <a href="parent-catagory.html" title="Parent Catagory">Parent Catagory</a>
    <div class="child">Child Category</div>
</div>

SCSS

#breadcrumb{
    a,
    .child{
        background: #f5f5f5;
        padding: 4px 7px;
        margin: 0 5px;
        &:first-child {
            margin-left: 0;
        }
    }
    .child{
        display: inline-block;
        background: #222;
        color: #fff;
    }
}

CSS输出

#breadcrumb a, #breadcrumb .child {
    background: #f5f5f5;
    padding: 4px 7px;
    margin: 0 5px;
}
#breadcrumb a:first-child, #breadcrumb .child:first-child {
    margin-left: 0;
}
#breadcrumb .child {
    display: inline-block;
    background: #222;
    color: #fff;
}

例：

http://codepen.io/anon/pen/vEaPqx

选项2 - Javascript解决方法

当然还有其他方法可以使用javascript，比如从另一个div获取值并将其附加到breadcrumb div。问题是，如果HTML发生变化，最终可能会破坏。它还取决于页面上已有的内容。

<div id="existing-child-category-text">Child Category</div>

<div id="breadcrumb">
    <a href="index.html">Home</a>
    <a href="parent-catagory.html" title="Parent Catagory">Parent Catagory</a>
</div>

使用Javascript：

// Create the child element
var child_cat = document.createElement('div');

// Add a class name to the child element
child_cat.className = 'child';

// Add the text from the existing child category to the child div
child_cat.innerHTML = document.getElementById('existing-child-category-text').innerHTML;

// Add the new div to the breadcrumbs
document.getElementById('breadcrumb').appendChild(child_cat);

例：

http://codepen.io/anon/pen/vEaPqx

最终我会假设如果你能够编辑javascript那么你也可以改变HTML，这将是一种更强大的解决方案。

选项3 - 使用伪元素

尽量避免这种情况，但您可以使用css伪元素进行类似的处理。但你需要通过javascript设置值或硬编码css上的值，这不是最好的解决方案。