Question

是否可以模拟 b 和 c 项目的div并设置样式而不更改此HTML？

我知道有::before和::after个伪元素，但找不到任何“包装”元素。也许像::wrap(.b, .c)。

<ul>
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
    <li class="d">d</li>
</ul>

一个很好的例子可能是隔离并将单个背景图像放在 b 和 c 之后。

Answer 1

您可以使用border属性并将其应用于b和c类：

li.b {
    border:1pt solid black;
}

li.c {
    border:1pt solid black; 
}

http://jsfiddle.net/ykjv16d8/1/

来自您的评论：

您可以为border-bottom设置none为b，为border-top设置none至c

li.b {
    border:1pt solid black;
    border-bottom: none;
}

li.c {
    border:1pt solid black; 
    border-top:none;
}

http://jsfiddle.net/ykjv16d8/2/

Answer 2

难道你不会做类似的事吗，

li.c,li.b { border: 1px solid black; }

Answer 3

假设列表项之间没有余量，这将起作用：

＆＃13;

@media screen\0 {   /* IE 8+ only */
    main {
        float: left;
    }
}

＆＃13;

li.b, li.c {
  border: 1px solid black;
}

li.b {
  border-bottom: none;
}

li.c {
  border-top: none;
}

＆＃13;

如果边距，您需要更具创意：

＆＃13;

<ul>
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
    <li class="d">d</li>
</ul>

＆＃13;

li {
  margin: 20px;
  position: relative;
}

li.b::before, li.c::before {
  content: '';
  border: 1px solid black;
  position: absolute;
  width: 100%;
  height: calc(100% + 20px);
  top: -10px;
  left: -2px;
}

li.b::before {
  border-bottom: none;
}

li.c::before {
  border-top: none;
}

＆＃13;

Answer 4

如果我明白你想要b和c都在一个盒子里？

试试这个

HTML

<ul>
  <li class="a">a</li>
  <li class="b bc">b</li>
  <li class="c bc">c</li>
  <li class="d">d</li>
</ul>

CSS

.bc {
   border: 1px solid red;
 }

.b.bc {
  border-bottom: none;
}

.c.bc {
 border-top: none;
}

你是说什么意思？让我知道

Answer 5

（目前）没有使用旧的CSS伪元素来解决此问题的方法。

包装CSS伪元素

5 个答案: