Question

我有以下两段由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选择器。

Answer 1

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

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

和

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

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

Answer 2

如果[att=val]属性仅此标记为值，则itemprop选择器（suggested by Stuart Kershaw’s）有效。

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

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

实施例

虽然两个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>

在CSS中定位itemprop？

2 个答案:

实施例