在 CSS 中定位 itemprop？答案

【问题标题】：Targeting itemprop in CSS?在 CSS 中定位 itemprop？
【发布时间】：2017-08-06 14:57:33
【问题描述】：

我有以下两段由 Wordpress 主题生成的代码。第一段代码是为 WP Page 生成的：

    <div class="postinner">
        <div itemprop="name">
            <h1 class="pagetitle">My Title</h1>
        </div>
        <p>First line of text</p>
        <p>Second line of text</p>
    </div>

第二部分代码是为 WP Post 生成的：

    <div class="postinner">
        <article itemtype="http://schema.org/Article" itemscope="" role="article">
            <div itemprop="headline">
                <h1 class="pagetitle">Hello World!</h1>
            </div>
        </article>
    </div>

我无法确定 CSS 选择器专门针对第一段代码的“itemprop DIV”中的 H1 标记文本并将其居中。

另外，我还想在 WP Post 中使用不同的文本颜色来定位和设置 H1 标签的样式，但同样无法弄清楚 CSS 选择器。

【问题讨论】：

标签： css

【解决方案1】：

您可以尝试使用 CSS 属性选择器，例如：

div[itemprop="name"] h1 {
   color: red;
}

和：

div[itemprop="headline"] h1 {
   color: yellow;
}

示例：http://jsfiddle.net/bEUk8/

【讨论】：

谢谢！显然适用于jsfiddle。虽然不能在我的 WP 主题中工作，但认为该主题正在覆盖我的自定义 CSS - 将进一步调查。
感谢@IanDude，祝你好运。
尝试使用 !important 覆盖样式，如下所示： div[itemprop="name"] h1 { color: red !important; }

【解决方案2】：

[att=val] 选择器（如suggested by Stuart Kershaw’s）在itemprop 属性仅将此标记作为值时起作用。

但是itemprop attribute can have multiple tokens as value，在这种情况下[att=val] 将不再匹配。

所以你might want to 使用[att~=val] selector，它在两种情况下都匹配：如果它是唯一的标记，或者它是多个标记之一。

示例

虽然两个span 元素都将name 标记作为itemprop 的值，但只有第一个元素与[itemprop="name"] 选择器的CSS 规则匹配：

[itemprop="name"] {font-size:200%;}
[itemprop~="name"] {color:red;}

<div itemscope>
  <span itemprop="name">'name'</span>
  <span itemprop="name headline">'name' and 'headline'</span>
</div>

【讨论】：