Question

我有一种情况，我需要在两个项目之间有一个分隔符，如插图所示。我可以想到两种方法可以做到这一点

1）在项目之间放置一个空的范围，并将其设置为分隔符 HTML：

  <body>
    <nav>
      <section class="icon1">Icon1</section>
      <span class="separator"></span>
      <section class="icon2">Icon2</section>
    </nav>
  </body>

CSS：

nav {height:40px; background:yellow; width:300px; padding:0 10px;}
.icon1{ background:green; width:40px; height:100%; float:left;}
.icon2 {background:red; width:40px; height:100%; float:left;}
.separator{width:2px; height:100%; background:blue; float:left;}

2）使用：在psuedo选择器之前为第二个项目并相应地设置样式

HTML：

  <body>
    <nav>
      <section class="icon1">Icon1</section>
      <section class="icon2">Icon2</section>
    </nav>
  </body>

CSS：

nav {height:40px; background:yellow; width:300px; padding:0 10px;}
.icon1{ background:green; width:40px; height:100%; float:left;}
.icon2 {background:red; width:40px; height:100%; float:left;}
.icon2:before{content:""; border-left:2px solid blue; position:absolute; height:40px;}

Plunk - http://plnkr.co/edit/a26btGkR8p5xcQeSxJiV?p=preview 插件适用于选项1和组合2，如果您想查看，请不要发表评论。

现在，我有一个动作，当用户点击第二个项目时，该模式弹出将打开，第二个项目突出显示，即它已经结束＆amp;在背景之上。

如果我使用上面的2），即：之前，然后我点击第2项，模态弹出显示，第2项突出显示，但该分隔符也会突出显示，因为从技术上讲它位于该元素内。我不希望突出显示该分隔符，因此，为了使它看起来像它的褪色，我写了几行js来切换它的不透明度（点击第二项）所以它看起来像它的褪色。

如果我使用1）即空跨度根本没有问题，不需要写js，它只是工作正常。

所以，我的问题在于我是否

应使用空白</ strong>

OR

使用：之前并做一些js

哪一个在语义上是正确的，哪一个在页面上的负担会减轻。

Answer 1

我会使用第二种解决方案，因为对于（可能是残障人士）用户来说，可能不需要分隔符来理解上下文。

Answer 2

这两种方式在语义上都是正确的。 我建议使用

<span class="separator"></span>方法，这样您就可以移动第二个图标而不必担心分隔符的位置。

确保:: before更具性能消耗（绝对不会引人注意）

请记住，您也可以使用边框来制作简单的分隔符。

这是正确的标记 - 空元素还是使用css / js来达到同样的效果

2 个答案: