css - 在 Microdata + Schema.org 中应用 CSS？

Question

我喜欢应用 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>

有办法吗？

Answer 1

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

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

• 具有 itemprop 属性的 span 元素:

  span[itemprop] {color:red;}
  

• span 元素，其 itemprop 属性的值为 name(没有其他值):

  span[itemprop="name"] {color:red;}
  

• span 元素，其 itemprop 属性的值为 name ( and possibly other values ):

  span[itemprop~="name"] {color:red;}