32

Wordpress テーマによって生成された次の 2 つのコード セクションがあります。このコードの最初のセクションは、WP ページ用に生成されます。

    <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>

コードのこの 2 番目のセクションは、WP 投稿用に生成されます。

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

コードの最初のセクションの「itemprop DIV」内の H1 タグのテキストを具体的にターゲットにして中央に配置する CSS セレクターがわかりません。

また、WP Post の H1 タグを別のテキスト色でターゲットにしてスタイルを設定したいのですが、CSS セレクターがわかりません。

4

2 に答える 2

9

[att=val]セレクター ( Stuart Kershaw によって提案されているように) は、itemprop属性がこのトークンのみを値として持つ場合に機能します。

ただし、itemprop属性は value として複数のトークンを持つことができます。その場合、[att=val]はもはや一致しません。

したがって、両方の場合に一致するselectorを使用することをお勧めします: それが唯一のトークンである場合、または複数のトークンの 1 つである場合。[att~=val]

例

両方のspan要素が のname値としてトークンを持っていますが、最初の要素のみが CSS ルールとセレクターitempropに一致します。[itemprop="name"]

[itemprop="name"] {font-size:200%;}
[itemprop~="name"] {color:red;}
<div itemscope>
  <span itemprop="name">'name'</span>
  <span itemprop="name headline">'name' and 'headline'</span>
</div>

于 2015-01-13T23:28:02.227 に答える