HTML：我应该将样式放在内部元素还是周围的 div 元素上？

Question

在HTML代码或一些模板代码中，一般我应该把我的样式放在哪里？在内部特定元素或周围的 div 元素上？和/或它有什么不同吗（例如它总是在 div 上工作还是只在某些特定元素上工作？）？

这是一个示例，cursor:pointer 的样式 class "cPointer" 适用于 div 以及图标...

但是什么被认为是更好的方法或者是否有一般规则？

<div id="apps-trash-<%- el.id %>" data-index="<%- el.id %>" class="${data.editMode ? 'showMode' : 'hideMode'} s-apps-trash" >
   <i class="t--Cancel cPointer"></i>
</div>

Answer 1

它不应该影响整个 DIV。我认为在您的场景中发生的情况是您的 i's innerHTML 是 DIV 中唯一占据其所有 space 的内容。不过，如果没有 CSS.

的其余部分，我无法保证任何事情

仅包含 i 内容的示例：

.cPointer{
  cursor: pointer;
}

<div id="apps-trash-<%- el.id %>" data-index="<%- el.id %>" class="${data.editMode ? 'showMode' : 'hideMode'} s-apps-trash" >
   <i class="t--Cancel cPointer">Pointer</i>
</div>

示例 DIV 中包含其他内容：

.cPointer{
  cursor: pointer;
}

<div id="apps-trash-<%- el.id %>" data-index="<%- el.id %>" class="${data.editMode ? 'showMode' : 'hideMode'} s-apps-trash" >
Other Text
   <i class="t--Cancel cPointer">Pointer</i>
</div>

HTML：我应该将样式放在内部元素还是周围的 div 元素上？

HTML: Should I place my styles on inner elements or surrounding div elements?

html

javascript

css

styles

rules