IDを基にしたカスタムCSS（appendTo（ 'head'））

Question

私は、特定の要素を探し、その中にinnerHTMLを抽出するChrome/Firefox拡張機能を開発中です。その後、私はそれをスタイルし、背景を赤くする必要があります。私が苦労している部分は、その要素がIDに基づいてデータを持つたびに、背景色が赤に変わることです。私は、CSSのappendTo（ '頭'）を使用しています。

var message = $(node).find('span.mention.style-scope.yt-live-chat-text-message-renderer'); 
if (message.length < 1) return; 
var messageID = $('.style-scope yt-live-chat-text-message-renderer').attr('id'); 
$('<style type="text/css">.style-scope yt-live-chat-text-message-renderer #id' + messageID + ' { background-color: #FF0000; }</style>').appendTo('head'); 

最後の行が問題です。私は前にこのコードを使用しましたが、IDを付けていないので、ここからどこに行くのか分かりません。

すべてのポインタは素晴らしいでしょう。さらに情報が必要な場合は、私はそれを提供するために最善を尽くすことができます。ありがとう！

EDIT：

これは私がターゲットにしようとしているものです：

<yt-live-chat-text-message-renderer class="style-scope yt-live-chat-item-list-renderer x-scope yt-live-chat-text-message-renderer-0" id="CjkKGkNLYlR2dUNlNjlNQ0ZVT3ZxZ29kR2FrS3ZREhtDTDdxejlxZTY5TUNGY25YbkFvZGR2a0JjdzA%3D" author-type=""> 

Answer 1

#id' + messageID + 'が実際にあなたが欠けている#id<messageId>の代わり#<messageId>

としてレンダリングされたセレクタを見つけることができないため、これに下記のコードを参照してください。クラス識別子.はyt-..の横にあるので、cssはその要素を見つけることができません。

また、IDを使用してその要素を参照することもできます。IDがページに一意であるため、.style-scope .yt-live-chat-item-list...のような他のクラスを追加する必要はありません。

頭にこれを追加することは非常に悪い習慣です。

Answer 2

は＃IDは+メッセージIDを削除し、＃+メッセージIDを使用していました。

$('<style type="text/css">.style-scope yt-live-chat-text-message-renderer #' + messageID + ' { background-color: #FF0000; }</style>').appendTo('head'); 

あなたのコードは％記号が含まれているCSSコンパイラは