CSS 选择器 - Select parent(s) 的元素有一个带有特定元素的兄弟

Question

我有一系列文本区域，它们都遵循相同的格式嵌套 html 格式，但我需要专门针对一个。我遇到的问题是我可以用来识别特定文本区域的唯一值是 parent 的兄弟姐妹的 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> 元素的 title 属性。

我可以具体得到 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")

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

我唯一能弄清楚的是添加限定符，即具有 class=name 的图例必须具有标题中具有 'Standout' 的锚点。

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

的相邻兄弟

任何帮助将不胜感激！

Answer 1

这似乎有效：

legend.name + ul >li:first-child > div > textarea {
  color:red;
}

legend.name + ul >li:first-child > div > textarea {
  color: red;
}

<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>

The only thing I can figure out is to add the qualifier that the legend with the class=name has to have the anchor that has 'Standout' in it's title.

你不能用 CSS 做...你需要 Javascript。

Answer 2

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 添加一个有意义的属性或 class。

CSS 选择器 - Select parent(s) 的元素有一个带有特定元素的兄弟

CSS selector - Select a element who's parent(s) has a sibling with a specific element

css

parent-child

css-selectors