CSS 选择器 - 选择一个元素，其父元素与特定元素有兄弟姐妹答案

【问题标题】：CSS selector - Select a element who's parent(s) has a sibling with a specific elementCSS 选择器 - 选择一个元素，其父元素与特定元素有兄弟姐妹
【发布时间】：2015-09-11 23:49:33
【问题描述】：

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

鉴于此 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 的 textarea。我能找到的唯一独特之处是元素中 <a> 元素的 title 属性。

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

我可以从 textarea 一直遍历到 <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=elements，其兄弟图例具有 class=name。

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

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

任何帮助将不胜感激！

【问题讨论】：

请贴一些代码。具体向我们展示您正在使用的实际 HTML 示例。 “▼ Para: TARGET TEXTAREA ::after Para: ::after”意义不大。

标签： css css-selectors parent-child

【解决方案1】：

我能找到的唯一独特之处是元素中元素的标题属性。

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

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

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

您最好的解决方案是从生成它的 JavaScript（或其他语言）中将有意义的属性或类添加到您的 HTML。

【讨论】：

【解决方案2】：

这似乎有效：

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>

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

这是你不能用 CSS 做的......你需要 Javascript。

【讨论】：