如何設計豐富網頁摘要的元素？

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