동일한 형식의 중첩 된 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라는 텍스트 영역을 타겟팅하고 싶습니다. 내가 찾을 수있는 유일한 특이 사항은 <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 = name을 가진 형제 범례가있는 class = elements가있는 ul이있는 class = element가있는 li이있는 class = "content"가있는 div가있는 모든 텍스트 영역이 제공됩니다.
내가 알아낼 수있는 유일한 것은 class = name을 가진 범례가 제목에 'Standout'이있는 앵커를 가져야한다는 한정자를 추가하는 것입니다.
나는 시도 $$("legend.name a[title*='Standout'] ~ ul.elements li.element div.content textarea")
했지만 앵커가 인접 형제가 아니기 때문에 분명히 실패합니다.ul
어떤 도움을 주시면 감사하겠습니다!
내가 찾을 수있는 유일한 특이 사항은 요소 내 요소의 제목 속성입니다.
일반적으로 해당 텍스트는 화면 판독기 용으로 현지화되어야하므로 제목 속성의 텍스트에 스타일 규칙을 추가하지 않으려 고합니다.
나는 $$ ( "legend.name a [title * = 'Standout'] ~ ul.elements li.element div.content textarea") 시도했지만 앵커가 ul의 인접한 형제가 아니기 때문에 분명히 실패합니다.
당신이 요구하는 것은 현재 CSS로는 불가능합니다. : /
여기서 가장 좋은 해결책은 HTML을 생성하는 JavaScript (또는 다른 언어) 내에서 의미있는 속성이나 클래스를 HTML에 추가하는 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다