Javascript 这是正确的标记-空元素还是使用css/js来实现相同的效果_Javascript_Html_Css_Semantics_Pseudo Class

Javascript 这是正确的标记-空元素还是使用css/js来实现相同的效果

javascript html css

Javascript 这是正确的标记-空元素还是使用css/js来实现相同的效果,javascript,html,css,semantics,pseudo-class,Javascript,Html,Css,Semantics,Pseudo Class,我有一种情况，我需要在两个项目之间有一个分隔符，如图所示。我可以想出两种方法来实现这一点 1）在项目之间放置一个空白范围，并将其设置为分隔符 HTML: 2）使用：在第二项的psuedo选择器之前，并相应地设置其样式 HTML: 扑通 plunk适用于选项1和2的组合，如果您想查看，请取消评论现在，我有一个动作，当用户点击第二个项目时，这是一个模式弹出窗口，第二个项目被突出显示，即它在背景上方如果我使用上面的2），即：before，然后我单击第二项，模态弹出框显示，第二项高亮显示，但分隔

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

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

2）使用：在第二项的psuedo选择器之前，并相应地设置其样式

HTML:

扑通 plunk适用于选项1和2的组合，如果您想查看，请取消评论

现在，我有一个动作，当用户点击第二个项目时，这是一个模式弹出窗口，第二个项目被突出显示，即它在背景上方

如果我使用上面的2），即：before，然后我单击第二项，模态弹出框显示，第二项高亮显示，但分隔符也高亮显示，因为从技术上讲它位于该元素内部。我不想那个分隔符被高亮显示，所以，为了让它看起来像是褪色的，我写了几行js来切换它的不透明度（点击第二项），使它看起来像是褪色的

如果我使用1）即空跨度，那么根本就没有问题，不需要编写js，它可以很好地工作

所以，我这里的问题是

应使用空范围

或

使用：在之前做一些js

哪一个在语义上正确，哪一个在页面上的负担更小。

我将使用第二个解决方案，因为分隔符对于（可能有障碍的）用户理解上下文可能不是必需的。

我将使用第二个解决方案，因为分隔符对于（可能有障碍的）用户可能不是必需的用户理解上下文。

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

方法，这样您就可以移动第二个图标，而不用担心分隔符的位置

可以肯定的是：：before更消耗性能（绝对不明显）

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

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

方法，这样您就可以移动第二个图标，而不用担心分隔符的位置

可以肯定的是：：before更消耗性能（绝对不明显）

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

请参见第页的浏览器兼容性表，然后决定<代码>适用于任何地方。@KunJ-我并不真的担心浏览器的兼容性，因为在我的情况下，我们只支持所有现代浏览器，即没有旧的IE，所以这不是一个问题。请参阅上的浏览器兼容性表并做出决定<代码>无处不在。@KunJ-我并不真的担心浏览器的兼容性，因为在我的例子中，我们只是支持所有现代浏览器，即没有旧的IE，所以这不是问题。如果我使用边框，它也会突出显示，因为这是元素的一部分。我试过了，但没用。谢谢你的建议。我仍然对这两个选项感到困惑，是否有一种方法可以测量这两种情况下的性能消耗？是的，您可以，使用firebug。。如果我使用borders，它会给出msWell中的确切时间，也会高亮显示，因为这是元素的一部分。我试过了，但没用。谢谢你的建议。我仍然对这两个选项感到困惑，是否有一种方法可以测量这两种情况下的性能消耗？是的，您可以，使用firebug。。它将在MSB中为您提供准确的时间，但这会不会增加额外的工作，即css和js，而不是将其仅放在empy元素中？我只是想更深入地理解它。是的，会的。但在我看来，这是一个相当清晰的解决方案，因为它没有添加理解导航所不需要的HTML元素，并且可能会让屏幕读者感到困惑。但是这会不会增加额外的工作，即css和js，而不仅仅是在empy元素中？我只是想更深入地理解它。是的，会的。但在我看来，这是一个相当清晰的解决方案，因为它没有添加理解导航不需要的HTML元素，并且可能会混淆屏幕阅读器。

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

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;}

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

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;}