切换显示是否更好：无；分别在几个相关的项目上，或者将它们包装在另一个 div 中并切换它？

发布于 2024-12-11 03:54:33 字数 1097 浏览 0 评论 0原文

假设我有三个 div 元素，分别具有类 a、b 和 c。我想使用 css 在 none 和 block 之间切换这些元素的显示，具体取决于父元素是否具有 current 类> 或悬停。这些元素总是一起切换，而不是单独切换。

我可以a)单独切换元素上的显示，或者我可以b)将它们包装在第四个div中，否则该div将不起作用，并切换该元素上的显示。

因此，例如，它是这样的：

<li>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</li>

li > .a,
li > .b,
li > .c {
  display: none;
}

li:hover > .a,
li.current > .a,
li:hover > .b,
li.current > .b,
li:hover > .c,
li.current > .c {
  display: block;
}

与此：

<li>
  <div class="wrap">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
  </div>
</li>

li > .wrap {
  display: none;
}

li:hover > .wrap,
li.current > .wrap {
  display: block;
}

CSS 中存在明显的代码清洁度差异，但代价是一些额外的 html 结构，但我认为网络赞成使用包装器。

我想知道这两种选择之间是否还有其他好处或成本，例如浏览器性能。

原文

Let's say I have three div elements with classes a, b, and c, respectively. I want to use css to toggle the display of these elements between none and block, depending on whether or not a parent element has a class of current or is hovered. The elements always toggle together, never individually.

I can a) toggle the display on the elements individually, or I can b) wrap them in a fourth div that is otherwise non-functional and toggle display on that element instead.

So, for instance, it's this:

<li>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</li>

li > .a,
li > .b,
li > .c {
  display: none;
}

li:hover > .a,
li.current > .a,
li:hover > .b,
li.current > .b,
li:hover > .c,
li.current > .c {
  display: block;
}

versus this:

<li>
  <div class="wrap">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
  </div>
</li>

li > .wrap {
  display: none;
}

li:hover > .wrap,
li.current > .wrap {
  display: block;
}

There's an obvious code-cleanliness difference in the css, at the expense of some additional html structure, but I think the net is in favor of using the wrapper.

I'm wondering if there are any other benefits or costs, such as browser performance, one way or the other between the two options.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小…红帽 2024-12-18 03:54:33

事实上，你也不必这样做:)。你正在使用CSS！！请考虑以下事项：

<!-- Notice the space between the class names -->
<li class="switch">
    <div class="a toggle"> ... </div>
    <div class="b toggle"> ... </div>
    <div class="c toggle"> ... </div>
</li>

现在，您可以保留 a、b、c 的样式元素。通过添加简单的 CSS 样式，您可以快速轻松地满足您的两组需求。此外，它是抽象的，因此您可以在需要时在更多地方使用它。无需添加 DOM 元素，也无需对 a、b 和 c 当前的样式代码进行任何实际更改。此外，您的交换机甚至不必是 li。

.switch:hover > .toggle,
.switch.current > .toggle { display:block;
}

有关 CSS 类的其他信息

元素可能属于多个类。通过利用它，您可以将伪功能与 CSS 内部的外观分开。当使用多个类时，浏览器将结合两者的规则来完成其样式。

请考虑以下事项：

<body class="article twocolumns">

body 元素将具有任何 html 定位和整个文档覆盖。
article 类将具有您可能需要的任何呈现样式。
twocolumns 将具有您需要的任何布局参数。

您可以提供单独或组合的样式，如下所示：

body { 
    margin:0 auto; 
}
.article { 
    background-color:white;
}
.twocolumns {
    background-image: url("divider.png");
}

/* This is a combination style. Notice no space between the two classes. */
.article.twocolumns > div { 
    padding:15px; 
    float:left; 
    width:50%; 
}
/* A possible further extension. */
.article.onecolumn > div {
    padding:20px; 
    float:none; 
    width:100%; 
}
.article.threecolumn > div { 
    padding:10px; 
    float:left; 
    width:33%; 
}

学习以这种方式做事有很多好处。它允许您更轻松地抽象功能、布局和表示元素，从而使您可以“移植”到您可能拥有的其他 Web 项目。它使您可以更有效地找到跨浏览器的工作方式，以获得更统一的外观和感觉。它还减少了意外调整可能与您的问题无关的规则的可能性。最后，它减少了对无关 DOM 元素的依赖，使您能够保持性能。

希望这有帮助。
模糊逻辑

Actually, you don't have to do either :). You're using CSS!! Consider the following:

<!-- Notice the space between the class names -->
<li class="switch">
    <div class="a toggle"> ... </div>
    <div class="b toggle"> ... </div>
    <div class="c toggle"> ... </div>
</li>

Now, you can keep your styling elements for a, b, c. By adding a simple CSS style, you can cover both of your sets of needs quickly and easily. Additionally, its abstracted, so you could use it in more places, when needed. No addition of DOM elements necessary and no real changes to your current styling code for a, b, and c. Furthermore, your switch doesn't even have to be an li.

.switch:hover > .toggle,
.switch.current > .toggle { display:block;
}

Additional Information on CSS classes

Elements may be of more than one class. By utilizing this, you can separate pseudo-functionality from look inside your CSS. When utilizing multiple classes, the browser will combine the rules of both to complete its style.

Consider the following:

<body class="article twocolumns">

The body element will have whatever html positioning, and overall document overrides.
The article class would have whatever presentation styles you might need.
The twocolumns would have whatever layout parameters your require.

You may provide individual or combination styles, like so:

body { 
    margin:0 auto; 
}
.article { 
    background-color:white;
}
.twocolumns {
    background-image: url("divider.png");
}

/* This is a combination style. Notice no space between the two classes. */
.article.twocolumns > div { 
    padding:15px; 
    float:left; 
    width:50%; 
}
/* A possible further extension. */
.article.onecolumn > div {
    padding:20px; 
    float:none; 
    width:100%; 
}
.article.threecolumn > div { 
    padding:10px; 
    float:left; 
    width:33%; 
}

Learning to do things in this way has a number of benefits. It allows you to abstract functionality, layout and presentation elements easier allowing you to "port" either to other web projects you might have. It allows you to find what works cross-browser more effectively for more unified look and feel. It also reduces the tendency to accidentally tweak rules that might not be related to your issue. Finally, it reduces your dependency on extraneous DOM elements allowing you to keep your performance.

Hope this helps.
FuzzicalLogic

回复收藏 0 原文