Question

我有一系列textareas都遵循相同的格式嵌套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。我能找到的唯一unqiquess是元素中<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")

这给了我所有带有class =＆＃34;内容＆＃34;的div的textareas。它有一个带有class = element的元素，其元素是一个带有class =元素的元素，它具有一个带有class = name的兄弟传奇。

我唯一可以弄清楚的是添加一个限定符，其中带有class = name的图例必须拥有具有＆＃39; Standout＆＃39;在它的标题。

我已经尝试过了 $$("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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

我唯一可以弄清楚的是添加一个限定符，其中带有class = name的图例必须拥有具有＆＃39; Standout＆＃39;在它的标题。

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

Answer 2

我能找到的唯一不确定因素是元素中元素的title属性。

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

我已尝试过$$（“legend.name a [title * ='Standout'] ~ul.elements li.element div.content textarea”）但由于锚不是相邻的兄弟UL

CSS目前无法提出您的要求。：/

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

CSS选择器 - 选择一个父元素具有特定元素

2 个答案: