読み込み - 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"> </a>
<a href="example2.com" data-content="innerHTML2"> </a>
<a href="example3.com" data-content="innerHTML3"> </a>