在CSS中定位itemprop？ [英] Targetting itemprop in CSS?

问题描述

我有以下两段代码由一个Wordpress主题生成。
这段代码是为WP页面生成的：

 < div class =postinner> 
< div itemprop =name> 
< h1 class =pagetitle>我的标题< / h1> 
< / div> 
< p>第一行文字< / p> 
< p>第二行文字< / p> 
< / div> 
  

这第二部分代码是为WP Post生成的：

 < div class =postinner> 
< article itemtype =http://schema.org/Articleitemscope =role =article> 
< div itemprop =headline> 
< h1 class =pagetitle> Hello World！< / h1> 
< / div> 
< / article> 
< / div> 
  

我无法找出CSS选择器来专门定位H1标签的文本， itemprop DIV用于代码的第一部分。

此外，我还希望使用不同的文字颜色来定位和标记WP帖子中的H1标记，但是又无法找出CSS选择器。

您可以尝试使用CSS属性选择器，例如：

    div [itemprop =name] h1 {
 color：red; 
} 
  

和：

  div [itemprop =headline] h1 {
 color：yellow; 
} 
  

例如：http://jsfiddle.net/bEUk8/

I have the following two sections of code generated by a Wordpress theme. This first section of code is generated for a WP Page:

    <div class="postinner">
        <div itemprop="name">
            <h1 class="pagetitle">My Title</h1>
        </div>
        <p>First line of text</p>
        <p>Second line of text</p>
    </div>

This second section of code is generated for a WP Post:

    <div class="postinner">
        <article itemtype="http://schema.org/Article" itemscope="" role="article">
            <div itemprop="headline">
                <h1 class="pagetitle">Hello World!</h1>
            </div>
        </article>
    </div>

I cannot figure out the CSS selector to specifically target and center the text of the H1 tag within the "itemprop DIV" for the 1st section of code.

Also, I would also like to target and style the H1 tag in the WP Post with a different text color but again, cannot figure out CSS selector.

解决方案

You could try using CSS Attribute Selectors, such as:

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

and:

div[itemprop="headline"] h1 {
   color: yellow;
}

example: http://jsfiddle.net/bEUk8/

这篇关于在CSS中定位itemprop？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！