특정 텍스트를 포함하는 요소에 대한 CSS 선택기가 있습니까?
저는 다음 표에 대한 CSS 셀렉터를 찾고 있습니다.
Peter | male | 34
Susanne | female | 12
"남성"을 포함하는 모든 TD와 일치하는 셀렉터가 있습니까?
요소, 요소의 특성 이름 및 요소의 명명된 특성 값에 대해 일치시킬 수 있습니다.요소 내에서 일치하는 내용이 보이지 않습니다.
그들은 CSS3 스펙을 위해 그것을 생각하고 있었던 것처럼 보이지만, 그것은 컷을 통과하지 못했습니다.
:contains()CSS3 선택기 http://www.w3.org/TR/css3-selectors/ # 내용 선택기
jQuery 사용:
$('td:contains("male")')
을 다행에데속추합니다가야해성라는 data-gendermale또는female값을 지정하고 속성 선택기를 사용합니다.
HTML:
<td data-gender="male">...</td>
CSS:
td[data-gender="male"] { ... }
실제로 왜 이것이 구현되지 않았는지에 대한 매우 개념적인 근거가 있습니다.기본적으로 세 가지 측면이 결합되어 있습니다.
- 요소의 텍스트 내용이 효과적으로 해당 요소의 하위 항목입니다.
- 텍스트 내용을 직접 대상으로 지정할 수 없습니다.
- CSS는 셀렉터를 사용한 상승을 허용하지 않습니다.
이 세 가지를 함께 사용하면 텍스트 내용이 있을 때까지 포함된 요소로 다시 올라갈 수 없으며 현재 텍스트를 스타일로 만들 수 없습니다.내림차순은 컨텍스트 및 SAX 스타일 구문 분석의 단일 추적만 허용하기 때문에 중요할 수 있습니다.다른 축과 관련된 오름차순 또는 다른 선택기는 DOM에 CSS를 적용하는 것을 크게 복잡하게 만드는 더 복잡한 횡단 또는 유사한 솔루션의 필요성을 소개합니다.
다음과 같이 콘텐츠를 데이터 속성으로 설정한 다음 속성 선택기를 사용할 수 있습니다.
/* Select every cell matching the word "male" */
td[data-content="male"] {
color: red;
}
/* Select every cell starting on "p" case insensitive */
td[data-content^="p" i] {
color: blue;
}
/* Select every cell containing "4" */
td[data-content*="4"] {
color: green;
}<table>
<tr>
<td data-content="Peter">Peter</td>
<td data-content="male">male</td>
<td data-content="34">34</td>
</tr>
<tr>
<td data-content="Susanne">Susanne</td>
<td data-content="female">female</td>
<td data-content="14">14</td>
</tr>
</table>또한 jQuery를 사용하여 데이터 콘텐츠 속성을 쉽게 설정할 수 있습니다.
$(function(){
$("td").each(function(){
var $this = $(this);
$this.attr("data-content", $this.text());
});
});
CSS에는 이 기능이 없기 때문에 내용별로 셀에 스타일을 지정하려면 JavaScript를 사용해야 합니다.를 들어 의 "XPath"를 합니다.contains:
var elms = document.evaluate( "//td[contains(., 'male')]", node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null )
그런 다음 결과를 다음과 같이 사용합니다.
for ( var i=0 ; i < elms.snapshotLength; i++ ){
elms.snapshotItem(i).style.background = "pink";
}
https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/
이것은 사실 OP 문제와 관련이 없지만 비슷한 문제를 해결합니다.
:has()
예:다음 선택기는 자식을 직접 포함하는 요소만 일치시킵니다.
a:has(> img)
참조:
https://developer.mozilla.org/en-US/docs/Web/CSS/ : has
https://caniuse.com/ ?search= have
콘텐츠는 속성이 아니며 유사 클래스를 통해 액세스할 수 없기 때문에 불가능합니다.CSS3 선택기의 전체 목록은 CSS3 사양에서 찾을 수 있습니다.
셀레늄 CSS 텍스트 선택을 원하는 사람들에게 이 스크립트는 유용할 수 있습니다.
이 방법은 찾고 있는 요소의 부모를 선택한 다음 다음 텍스트가 있는 자식을 검색하는 것입니다.
public static IWebElement FindByText(this IWebDriver driver, string text)
{
var list = driver.FindElement(By.CssSelector("#RiskAddressList"));
var element = ((IJavaScriptExecutor)driver).ExecuteScript(string.Format(" var x = $(arguments[0]).find(\":contains('{0}')\"); return x;", text), list);
return ((System.Collections.ObjectModel.ReadOnlyCollection<IWebElement>)element)[0];
}
이 경우 첫 번째 요소는 항상 하나의 요소이기 때문에 두 개 이상이면 첫 번째 요소가 반환됩니다.
DOM을 직접 만들지 않는 경우(예: 사용자 스크립트에서) 순수 JS로 다음 작업을 수행할 수 있습니다.
for ( td of document.querySelectorAll('td') ) {
console.debug("text:", td, td.innerText)
td.setAttribute('text', td.innerText)
}
for ( td of document.querySelectorAll('td[text="male"]') )
console.debug("male:", td, td.innerText)<table>
<tr>
<td>Peter</td>
<td>male</td>
<td>34</td>
</tr>
<tr>
<td>Susanne</td>
<td>female</td>
<td>12</td>
</tr>
</table>콘솔 출력
text: <td> Peter
text: <td> male
text: <td> 34
text: <td> Susanne
text: <td> female
text: <td> 12
male: <td text="male"> male
모든 면에서 훌륭한 답변이지만, 실용적인 시나리오에서 저에게 효과적인 무언가를 추가할 수 있다고 생각합니다. 바로 활용하는 것입니다.aria-labelCSS의 속성.
: 모는독자위해를르:aria-label은 시각 장애가 있는 사용자가 웹 사이트를 사용하는 경우 화면 표시자에게 무언가가 무엇인지 알리기 위해 다른 유사한 속성과 함께 사용되는 속성입니다.많은 웹 사이트에서 이미지 또는 텍스트가 들어 있는 요소에 이러한 속성을 "설명자"로 추가합니다.
따라서 웹 사이트별로 매우 다르지만 요소에 이 기능이 포함되어 있는 경우 속성의 내용을 사용하여 해당 요소를 선택하는 것이 매우 간단합니다.
HTML:
<td aria-label="male">Male</td>
<td aria-label="female">Female</td>
CSS:
td[aria-label="male"] {
outline: 1px dotted green;
}
이는 기술적으로 데이터 속성 솔루션을 사용하는 것과 동일하지만, 웹 사이트의 작성자가 아닌 사용자에게 유용할 뿐만 아니라, 이 사용 사례를 지원하도록 특별히 설계된 구식 솔루션이 아닙니다. 이 솔루션 자체가 상당히 일반적입니다.한 가지 단점은 의도한 요소에 이 속성이 있다는 보장이 없다는 것입니다.
적어도 CSS3까지는 부분적인 내부 텍스트로 요소를 선택할 수 없기 때문에 대부분의 답변은 더 많은 데이터를 포함하기 위해 HTML 코드를 작성하는 방법에 대한 대안을 제공하려고 합니다.하지만 할 수 있습니다. 바닐라 자바스크립트를 조금만 추가하면 됩니다. 여성도 남성을 포함하고 있기 때문에 선택할 수 있습니다.
cells = document.querySelectorAll('td');
console.log(cells);
[].forEach.call(cells, function (el) {
if(el.innerText.indexOf("male") !== -1){
//el.click(); click or any other option
console.log(el)
}
}); <table>
<tr>
<td>Peter</td>
<td>male</td>
<td>34</td>
</tr>
<tr>
<td>Susanne</td>
<td>female</td>
<td>14</td>
</tr>
</table><table>
<tr>
<td data-content="Peter">Peter</td>
<td data-content="male">male</td>
<td data-content="34">34</td>
</tr>
<tr>
<td data-conten="Susanne">Susanne</td>
<td data-content="female">female</td>
<td data-content="14">14</td>
</tr>
</table>
데이터 속성(보이저의 답변)이 어떻게 처리되어야 하는지에 동의하지만, CSS 규칙은 다음과 같습니다.
td.male { color: blue; }
td.female { color: pink; }
특히 다음과 같이 단순할 수 있는 Angularjs와 같은 클라이언트 측 lib를 사용하면 설정이 훨씬 더 쉬울 수 있습니다.
<td class="{{person.gender}}">
내용이 한 단어인지 확인하십시오!또는 다음을 사용하여 다른 CSS 클래스 이름에 매핑할 수도 있습니다.
<td ng-class="{'masculine': person.isMale(), 'feminine': person.isFemale()}">
완전성을 위해 다음은 데이터 속성 접근 방식입니다.
<td data-gender="{{person.gender}}">
만약 당신이 Chimp / Webdriver.io 을 사용하고 있다면, 그들은 CSS 사양보다 훨씬 더 많은 CSS 선택기를 지원합니다.
예를 들어, "Bad bear"라는 단어가 포함된 첫 번째 앵커를 클릭합니다.
browser.click("a*=Bad Bear");
@사용에 대한 관리자의 답변data-*속성(예:data-gender="female|male"는 2017년 기준으로 가장 효과적이고 표준을 준수하는 접근 방식입니다.
[data-gender='male'] {background-color: #000; color: #ccc;}
텍스트를 중심으로 한 일부 선택기가 제한적이기 때문에 거의 대부분의 목표를 달성할 수 있습니다.:::첫 번째 문자는 요소의 첫 번째 문자에 제한된 스타일을 적용할 수 있는 유사 요소입니다.요소(예: 단락)의 첫 번째 줄을 분명히 선택하는 것 외에 :: 첫 번째 줄 유사 요소도 있습니다. 또한 CSS를 사용하여 textNode의 특정 측면을 스타일화할 수 있음을 의미합니다.
그러한 옹호가 성공하고 실행될 때까지 제가 제안할 수 있는 차선책은 다음과 같습니다.explode/split공백 구분 기호를 사용하는 단어, 내부의 각 개별 단어를 출력span요소를 선택한 다음 단어/단어 목표가 :n번째 선택기와 함께 사용되는 예측 가능한 경우:
$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
echo '<span>'.$value1.'</span>;
}
예측할 수 없는 경우에도 사용에 대한 보이저의 답변을 사용합니다.data-*기여하다.PHP를 사용한 예:
$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
echo '<span data-word="'.$value1.'">'.$value1.'</span>;
}
원하는 콘텐츠에 스타일을 적용하려는 경우.쉬운 속임수.
td { border: 1px solid black; }
td:empty { background: lime; }
td:empty::after { content: "male"; } <table>
<tr>
<td>Peter</td>
<td><!--male--></td>
<td>34</td>
</tr>
<tr>
<td>Susanne</td>
<td>female</td>
<td>14</td>
</tr>
</table>https://jsfiddle.net/hyda8kqz/
만약 당신이 자바스크립트나 jquery를 사용하고 싶지 않다면 속성 옵션이 당신의 최선의 선택이라고 생각합니다.
예를 들어 준비된 단어로 모든 테이블 셀에 스타일을 지정하려면 HTML에서 다음 작업을 수행합니다.
<td status*="ready">Ready</td>
그러면 css로:
td[status*="ready"] {
color: red;
}
다음과 같은 작은 필터 위젯 수행:
var searchField = document.querySelector('HOWEVER_YOU_MAY_FIND_IT')
var faqEntries = document.querySelectorAll('WRAPPING_ELEMENT .entry')
searchField.addEventListener('keyup', function (evt) {
var testValue = evt.target.value.toLocaleLowerCase();
var regExp = RegExp(testValue);
faqEntries.forEach(function (entry) {
var text = entry.textContent.toLocaleLowerCase();
entry.classList.remove('show', 'hide');
if (regExp.test(text)) {
entry.classList.add('show')
} else {
entry.classList.add('hide')
}
})
})
이 질문의 구문은 로봇 프레임워크 구문과 유사합니다.이 경우 contains에 사용할 수 있는 CSS 셀렉터가 없지만 대신 사용할 수 있는 Selenium Library 키워드가 있습니다.요소가 포함될 때까지 기다립니다.
예:
Wait Until Element Contains | ${element} | ${contains}
Wait Until Element Contains | td | male
언급URL : https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text
'programing' 카테고리의 다른 글
| 데이터에 대한 Spring Boot 데이터 원본 초기화 오류가 발생했습니다.2.5.0 업그레이드 후 sql 스크립트 (0) | 2023.06.23 |
|---|---|
| 드롭 테이블 문 mysql에서 변수를 사용하는 방법은 무엇입니까? (0) | 2023.06.18 |
| python의 멀티프로세싱 풀에서 키보드 인터럽트 (0) | 2023.06.18 |
| 중복된 행 제거 (0) | 2023.06.18 |
| Ruby에서 파일을 만드는 방법 (0) | 2023.06.18 |