如何对丰富网页摘要的元素进行样式设置？答案

【问题标题】：How to style elements of rich snippets?如何对丰富网页摘要的元素进行样式设置？
【发布时间】：2014-11-30 04:29:20
【问题描述】：

例如我有这个：

<div itemscope itemtype="http://schema.org/Review">
<a itemprop="url" href="http://www.test.com"><div itemprop="name"><strong>Test</strong></div>
</a>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by: <span itemprop="name">Mr. Test</span></div>
<div><meta itemprop="datePublished" content="2014-10-05">Date published: 10/05/2014</div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1"><span itemprop="ratingValue">5</span> / <span itemprop="bestRating">5</span> stars</div>
</div>

如何设置 div 的样式？我不明白如何“定位”它们，因为它没有像 div id="divname" 这样的名称。

我尝试了例如 #author 或 #itemscope 但没有做任何事情。

任何帮助将不胜感激。谢谢！

【问题讨论】：

div[itemprop='author'] > 跨度 {color:red;}

标签： css code-snippets

【解决方案1】：

您可以使用attribute selector：

[itemprop="author"] {
    background: red;
}
[itemprop="reviewRating"] {
    background: yellow;
}

示例：http://jsfiddle.net/cvkxqkfc/1/

请注意，IE6 等较旧的非现代浏览器不支持此功能。

查看浏览器兼容性：http://www.quirksmode.org/css/selectors/#link3

【讨论】：