在 Microdata + Schema.org 中应用 CSS？

【问题标题】：Apply CSS in Microdata + Schema.org?在 Microdata + Schema.org 中应用 CSS？
【发布时间】：2015-06-11 07:11:19
【问题描述】：

我喜欢应用 CSS 将文本与面包屑中的设计相匹配。

例如：

 <ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
› <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

有办法吗？

【问题讨论】：

（注意› 字符在此上下文中无效，不能有文本作为ol 的直接子代。我看到Schema.org 上的示例包含它；我会尝试改变它。）

标签： css schema.org microdata

【解决方案1】：

您可以像任何其他元素一样使用 Microdata 设置元素的样式，例如使用元素选择器 (ol {color:red;}) 或在 HTML 中添加 class 属性并使用 CSS 中的类选择器 (.breadcrumbs {color:red;})。

如果您想利用现有的微数据属性，可以使用attribute selectors，例如：

具有itemprop 属性的span 元素：
```
span[itemprop] {color:red;}
```
具有itemprop 属性的span 元素，其值为name（没有其他值）：
```
span[itemprop="name"] {color:red;}
```
具有itemprop 属性的span 元素的值为name (and possibly other values)：
```
span[itemprop~="name"] {color:red;}
```

【讨论】：