我不想使用 !important 或为每个可以使用辅助类处理的情况编写新规则。比如我想做；
HTML
<body id="sameId">
<div class="wrapper">
<div class="article text-center text-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</body>
CSS
/* Helper Classes */
#sameId .text-center {
text-align:center;
}
#sameId .text-bold {
font-weight: bold;
}
/* Article Styles */
.wrapper .article {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
text-align:left;
font-weight: normal;
}
将来在所有页面的 body 标签上使用相同的 id 以获得更大的 css 特异性是否会导致问题？
最佳答案
如果您正在使用这样的辅助类，您也可以在其中使用 !important 或直接在 HTML 标记中编写样式。它们只是内联样式的替代品，因此您还没有真正将内容与样式分开。
CSS 规则最好能反射(reflect)您想要传达的内容，而不是确切的外观。示例:
<body>
<div class="wrapper">
<div class="article first-article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</body>
CSS:
/* Article Styles */
.wrapper .article {
padding: 5px;
border: 1px solid #ddd;
text-align:left;
font-weight: normal;
}
.wrapper .article.first-article {
text-align:center;
font-weight: bold;
}
关于html - body 标签上的 id 相同，以提高 css 特异性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33363458/