在CSS中定位itemprop？

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

    <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选择器来专门针对第一段代码的“itempropdiv”中的H1标记文本并将其居中

---

此外，我还想在WP Post中使用不同的文本颜色来设置H1标记的目标和样式，但同样无法理解CSS选择器。

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

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

以及：

---

示例：

如果

itemprop

属性只有此标记作为值，则

[att=val]

选择器（as）工作

但是，在这种情况下，

[att=val]

将不再匹配

所以您使用，这两种情况下都匹配：如果它是唯一的令牌，或者如果它是多个令牌中的一个

例子 尽管两个

span

元素都有

name

标记作为

itemprop

的值，但只有第一个标记由CSS规则与

[itemprop=“name”]

选择器匹配：

[itemprop=“name”]{font size:200%；}
[itemprop~=“name”]{颜色：红色；}

“姓名”
“名称”和“标题”

谢谢！显然在JSFIDLE中工作。虽然在我的WP主题中不工作，但认为该主题正在覆盖我的自定义CSS-将进一步调查。谢谢@IanDude，祝你好运。请尝试！重要信息：覆盖样式，如：div[itemprop=“name”]h1{color:red！重要信息；}

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