html - 在 CSS 中定位 itemprop

Question

使用下面的 custom.css 代码，我成功地覆盖了商业 Joomla 3 模板的 css 文件。

div[itemprop="articleBody"] h1, h2, h3, h4, h5, h6 {
     margin-top: 18px!important;
     margin-bottom: 0px!important;
}

custom.css 应该适用于:

<div itemprop="articleBody">
   <h1><strong>Some Text</strong></h1>
   <p> Some Text Some Text Some Text Some Text </p>
</div>

问题是 custom.css 代码甚至应用于 <div itemprop="articleBody"> 之外的 h 标签所有主流浏览器中的容器。

可能是什么问题？

Answer 1

通过写作

div[itemprop="articleBody"] h1, h2, h3, h4, h5, h6 {
 margin-top: 18px!important;
 margin-bottom: 0px!important;
}

首先使用 itemprop 为 div 中的 h1 设置样式，然后为所有 h2,h3,h4,h5,h6 添加样式 在整个页面上。

所以问题是您没有正确编写 CSS 选择器。 您需要为每个标题添加一个父选择器，例如

div[itemprop="articleBody"] h1,
div[itemprop="articleBody"] h2,
div[itemprop="articleBody"] h3{
    /*styles*/
}

或者如果你使用像 SASS 或 LESS 这样的 CSS 预处理器

div[itemprop="articleBody"] {
   h1 { }
   h2 { }
   h3 { }
   ...
 }