gpt4 book ai didi

html - body 标签上的 id 相同,以提高 css 特异性

转载 作者:行者123 更新时间:2023-11-28 06:58:33 25 4
gpt4 key购买 nike

我不想使用 !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 特异性是否会导致问题?

https://jsbin.com/tamaxetuse/1/edit?html,css,output

最佳答案

如果您正在使用这样的辅助类,您也可以在其中使用 !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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com