32

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

4

2 回答 2

67

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

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

和：

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

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

于 2013-11-04T22:10:23.313 回答
9

如果属性仅具有此标记作为值，则[att=val]选择器（如Stuart Kershaw 所建议的）起作用。itemprop

但是该itemprop属性可以有多个标记作为 value，在这种情况下[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>

于 2015-01-13T23:28:02.227 回答