如何设计丰富网页片段的元素？

Question

例如我有这个：

<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，但没有做任何事情。

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

Answer 1

您可以使用attribute selector：

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

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

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

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