在 CSS 中定位 itemprop？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19778151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Targeting itemprop in CSS?
提问by IanDude
I have the following two sections of code generated by a Wordpress theme. This first section of code is generated for a WP Page:
我有以下两段由 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>
This second section of code is generated for a WP Post:
第二部分代码是为 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>
I cannot figure out the CSS selector to specifically target and center the text of the H1 tag within the "itemprop DIV" for the 1st section of code.
我无法找出 CSS 选择器来专门针对第一部分代码的“itemprop DIV”中的 H1 标记文本进行定位和居中。
Also, I would also like to target and style the H1 tag in the WP Post with a different text color but again, cannot figure out CSS selector.
此外，我还想使用不同的文本颜色在 WP Post 中定位和设置 H1 标签的样式，但同样无法找出 CSS 选择器。
回答by Stuart Kershaw
You could try using CSS Attribute Selectors, such as:
您可以尝试使用 CSS 属性选择器，例如：
div[itemprop="name"] h1 {
color: red;
}
and:
和：
div[itemprop="headline"] h1 {
color: yellow;
}
example: http://jsfiddle.net/bEUk8/
回答by unor
The [att=val]selector (as suggested by Stuart Kershaw's) works if the itempropattribute has onlythis token as value.
如果属性仅将此标记作为值，则[att=val]选择器（由 Stuart Kershaw 建议）起作用。itemprop
But the itempropattribute can have multiple tokens as value, in which case the [att=val]wouldn't match anymore.
但是itemprop属性可以有多个标记作为 value，在这种情况下[att=val]将不再匹配。
So you might want touse the [att~=val]selector, which matches in both cases: if it's the only token or if it's one of multiple tokens.
所以你可能想要使用[att~=val]selector，它在两种情况下都匹配：如果它是唯一的标记或者它是多个标记之一。
Example
例子
Although both spanelements have the nametoken as value of itemprop, only the first one is matched by the CSS rule with the [itemprop="name"]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>