html – 具有嵌套CSS的类与ID

发布时间：2020-12-14 18:36:39 所属栏目：资源来源：网络整理

导读：假设这样的 HTML： div id="header" span class="title"Title/span !-- more spans and other things here --/div 这将与嵌套的CSS一起使用： #header .title { /* CSS */ } 这当然有效,但我不喜欢这里的课程用法.由于我只需要一次样式标题,我想使用id.但是

假设这样的 HTML：

<div id="header">
  <span class="title">Title</span>
  <!-- more spans and other things here -->
</div>

这将与嵌套的CSS一起使用：

#header .title { /* CSS */ }

这当然有效,但我不喜欢这里的课程用法.由于我只需要一次样式标题,我想使用id.但是这个名称必须像header_title(因为我可能在HTML中有其他标题),导致CSS

#header #header_title { /* CSS */ }

现在这似乎打败了嵌套CSS的目的,然后我可以完全删除第一个#header.

我无法找到一种“正确”的方法.我错过了什么,或者我只需要在这里使用一些“脏”代码？

解决方法

它实际上并不重要.

标记的重要之处在于它的可读性; HTML是关于语义的,因此您的标记代表您的内容.通过这样做,如果你几个月后回到你的HTML而不触及它,你应该能够快速了解??你写的地球:)

从语义上讲,#header = .title对#header #header_title更有意义,原因有两个：一,因为它更容易阅读,两个,因为ids的目的是,确定！您可以单独使用#header_title,但限制您拥有的ID数量会更加清晰.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!