Применить CSS в Microdata + Schema.org?

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

Вы можете стилизовать элементы с помощью Microdata, как и любой другой элемент, например. с селектором элементов (ol {color:red;}) или добавлением class атрибутов в HTML и с помощью селектора классов в CSS (.breadcrumbs {color:red;}).

Если вы хотите использовать существующие атрибуты микроданных, вы могли бы использовать attribute selectors, например:

• span элемент, который имеет itemprop атрибут:

  span[itemprop] {color:red;} 
  

• a span, который имеет атрибут itemprop со значением name (и никакое другое значение):

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

• span элемент, который имеет атрибут itemprop со значением name (and possibly other values):

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