CSS itemprop选择器问题：自定义样式意外作用于容器外H标签

我最近尝试用custom.css覆盖一款商业Joomla 3模板的样式，写了这段代码：

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

原本期望这个样式只作用在带有itemprop="articleBody"的div容器内的h1到h6标签，比如下面这种结构：

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

但实际在所有主流浏览器里，容器外的h标签也被应用了这个样式，这到底是哪里出问题了？

嘿，这个问题其实是CSS选择器的写法失误导致的！你仔细看一下自己写的选择器：
div[itemprop="articleBody"] h1, h2, h3, h4, h5, h6

在CSS里，逗号是用来分隔独立选择器的，所以这段选择器的实际含义是：

• 匹配div[itemprop="articleBody"]内部的h1标签
• 匹配页面上所有的h2标签
• 匹配页面上所有的h3标签
• ……以此类推到h6标签

也就是说，除了h1是被限定在目标div内的，后面的h2到h6都是全局生效的选择器，自然会影响到容器外的所有对应标题标签。

两种正确的写法推荐： #

方法1：逐个为每个标题标签添加容器限定

这种写法兼容性最好，适合所有支持CSS2+的浏览器：

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; 
}

方法2：用:is()伪类简化代码

如果你的目标浏览器支持CSS3的:is()伪类（Joomla 3的主流使用环境基本都支持），可以用这种更简洁的写法：

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

:is()伪类会把括号内的所有选择器都绑定到前面的容器限定上，这样所有标题标签都会只作用在目标div内部啦。

内容的提问来源于stack exchange，提问作者Mkgl