のは、私は次のドキュメントがあるとしましょう：要素の値が与えられている場合、DOM要素の一意のCSSセレクタを取得するにはどうすればよいですか？
<html>
<body>
<h1>Hello world</h1>
</body>
</html>
は、文字列の「Hello World」を考えると、どのように私は、ドキュメントを検索し、（この場合は、H1）正しい要素のCSSセレクタを生成することができますか？
これはうんざりです。$（ "：contains"）を使用すると、ツリー全体が最も内側の要素になります。これを使用して、最も内側のノードを見つけます。
var myContainer = $(":contains('Hello world') ");
while(myContainer.children().length != 0) {
myContainer =myContainer.children();
}
myContainer.addClass("foo");.foo {
border: 1px dotted blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h1>Hello world</h1>
</body>
</html>あるいは、単一のセレクタで同じことを行うには：あなたが使用しなくても、純粋なJavaScriptの答えを探しているなら
$(":contains('Hello world'):not(:has(*))").addClass("foo");.foo {
border: 1px dotted blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-pane">
<div class="header-pane">
<h1>Hello world</h1>
</div>
<div class="inner-content">
<h2>
Hello world is me!
</h2>
</div>
</div>あなたはDOM操作/トラバーサルを使うことができます。
私はノードツリーを走査し、テキストの内容を文字列として返すように設計されたこのコードスニペットを採用しました。 https://gist.github.com/padolsey/3033511
function getText(node) {
if (node.nodeType === 3) {
return node.data;
}
var txt = '';
if (node = node.firstChild) do {
txt += getText(node);
} while (node = node.nextSibling);
return txt;
}
function checkNode(node) {
if (node.nodeType === Node.TEXT_NODE) {
var expr= "Hello World";
if (node.textContent.indexOf(expr) >= 0) {
node.parentNode.className = "foo";
}
}
if (node = node.firstChild) {
//set to next child and continue if it exists
do {
checkNode(node);
} while (node = node.nextSibling); //while has sibilings
}
}
checkNode(document.body).foo {
color: red;
}<div>
<h1>Hello World</h1>
<p>Hello World</p>
<h1>Hlelo Wrldo</h1>
</div>私はジェームズPadolseyからこのブログの記事に私をリードするいくつかの研究の後に、このソリューションを思い付いた：Replacing text in the DOM… solved?彼は要素を横断するの難しさを語りますユーザーに表示されるテキストが次のような子要素に拡散される可能性があるため、正確にテキストに含まれるテキストを取得します。
<p>
This is a <span class="f">te<em>st</em></span>.
</p>
このブログ記事の主題は、テキストを置き換えることです。上に示したように、奇妙なネスティングを尊重しながら、これを行う方法の非常に良い例を作成しました。ライブラリを含まずにはるかに堅牢なソリューションに興味があるなら、彼のポストに読書をすることをお勧めします。それはやや古いですが、最後の彼の例は私が提供したのと同じ要点に基づいています。
'：contains（ 'Hello world'）' –
あなたはjQueryを使う必要があります。標準のCSSを使用する方法はありません：https://www.w3.org/TR/css3-selectors/#selectors – jwerre