在CSS中定位itemprop？

Question

我有以下两段由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选择器是否专门针对第一部分代码中的"itemprop DIV"中的H1标签的文本进行定位和居中.

另外,我还希望使用不同的文本颜色来定位和设置WP Post中的H1标签,但是再次无法找出CSS选择器.

Answer 1

您可以尝试使用CSS属性选择器,例如:

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

和:

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

例如:http://jsfiddle.net/bEUk8/

Answer 2

如果属性只有此标记作为值,则[att=val]选择器(由Stuart Kershaw建议)可以工作.itemprop

但是该itemprop属性可以有多个标记作为值,在这种情况下,[att=val]它将不再匹配.

因此,您可能希望使用在两种情况下都匹配的[att~=val]选择器:如果它是唯一的标记,或者它是多个标记之一.

例

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

[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>