読み込み - html style




CSSの仕方:内部HTMLに基づいて要素を選択する (5)

CSSを使用すると、アンカータグのコンテンツを検出できません。

[value=]はタグの属性を参照します

<a href="" value="blah"> innerHTML2 </a>

value属性がaタグ上で有効なHTMLでないためあまり役に立ちません

可能であれば、そのタグでクラスをスラップします。 これはおそらく可能ではないので(すでに行っているので)、jQueryを使ってそのタグにクラスを追加することができます。 次のようなことを試してください:

   <script type="text/javascript">
        $(function(){ $('a:contains(innerHTML2)').addClass('anchortwo'); });
    </script>

そして、 .anchortwoをクラスセレクタとして使用します。

この質問には既に回答があります:

<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

私は内側のHTMLに基づいて、CSSセレクタを使用して2番目のスタイル(innerHTML2)をスタイルしたいと思います。 これは可能ですか? 私はa[value=innerHTML2]を使用しようとしましa[value=innerHTML2]が、動作しないようです。


CSSセレクタを使ってHTMLを処理するためのコマンドラインツールa:contains("innerHTML1")使うとa:contains("innerHTML1")使うことができます。

例えば:

$ echo '<a href="example1.com"> innerHTML1 </a>' | pup 'a:contains("innerHTML1")' text{}
 innerHTML1 

これはCSSを使っては不可能です。 ただし、jQueryを使用して行うことはできます。 読むことができる素晴らしいブログ記事があります。


これは、n番目の子セレクタでは非常に簡単です。

<style>
a:nth-child(2) {
  color: green;
}
</style>
<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

編集:これは私がこれを見つけたソースです。 ブラウザの互換性については、ここを確認してください。 出典: http://reference.sitepoint.com/css/pseudoclass-nthchild : http://reference.sitepoint.com/css/pseudoclass-nthchild


<style>
a[data-content]::before {
  content: attr(data-content);
}
a[data-content="innerHTML2"] {
  color: green;
}
</style>
<a href="example1.com" data-content="innerHTML1">&nbsp;</a>
<a href="example2.com" data-content="innerHTML2">&nbsp;</a>
<a href="example3.com" data-content="innerHTML3">&nbsp;</a>






css-selectors