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将样式设置为h1内的div，然后将样式添加到整个页面上的所有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 { }
   ...
 }

Answer 2

您必须为每个标题定义选择itemprop属性。重写样式定义如下

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

Answer 3

在第一阶段你必须把h1，h2，h3，h4，h5，h6标签放在div元素中。否则，如果你只是把h1，h2标签广告写成一些没有div元素的CSS，那么它将覆盖所有的css。所以你应该使用父选择器，即div元素

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

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

在CSS中定位itemprop

3 个答案: