CSS 选择器 - 选择一个元素，该元素的父元素具有具有特定元素的兄弟元素

Question

我有一系列文本区域，它们都遵循相同的格式嵌套 html 格式，但我需要专门针对一个。我遇到的问题是，我可以用来识别特定文本区域的唯一值是 parent 的 sibling 的 child 。

给定这个 html

<fieldset>
<legend class="name">
<a href="#" style="" id="element_5014156_showhide" title="Toggle “Standout List”">▼</a>
</legend>
<ul id="element_5014156" class="elements">
<li class="element clearboth">
<h3 class="name">Para:</h3>
<div class="content">
<textarea name="container_prof|15192341" id="container_prof15192341">  TARGET TEXTAREA</textarea>
</div>
::after
</li>
<li class="element clearboth">
<h3 class="name">Para:</h3>
<div class="content">
<input type="text" class="textInput" name="container_prof|15192342" id="container_prof_15192342" value="" size="64">
</div>
::after
</li>
</ul>
</fieldset>

有很多 <li>元素。我不能使用动态创建的名称或 ID。

我想定位到显示 TARGET TEXTAREA 的文本区域。我能找到的唯一不足之处是 <a> 的标题属性元素中的元素。

我可以具体得到那个 legend.name a[title*='Standout'] 在 Chrome 控制台中:$$("legend.name a[title*='Standout']");

我可以一直遍历到<legend>来自文本区域的元素 legend.name ~ ul.elements li.element div.content textarea

在 Chrome 控制台中:$$("legend.name ~ ul.elements li.element div.content textarea")

这给了我所有的文本区域，它有一个带有 class="content"的 div，有一个 li 和一个 class=element，它有一个 ul 和一个 class=elements，它有一个带有 class=name 的同级图例。

我唯一能弄清楚的是添加限定符，即具有 class=name 的图例必须具有标题中包含“Standout”的 anchor 。

我试过了 $$("legend.name a[title*='Standout'] ~ ul.elements li.element div.content textarea")但这显然失败了，因为 anchor 不是 ul 的相邻兄弟节点。

如有任何帮助，我们将不胜感激!

Answer 1

The only unqiquess I can find is the title attribute of the element within the element.

通常您不希望在 title 属性的文本上添加样式规则，因为该文本必须针对屏幕阅读器进行本地化。

I've tried $$("legend.name a[title*='Standout'] ~ ul.elements li.element div.content textarea") but that fails obviously since the anchor is not an adjacent sibling of the ul

您所要求的目前无法通过 CSS 实现。 :/

您最好的解决方案是在生成它的 JavaScript(或其他语言)中向您的 HTML 添加一个有意义的属性或类。