我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
当前回答
看起来他们是在考虑CSS3规范,但它没有被削减。
:contains() CSS3选择器http://www.w3.org/TR/css3-selectors/#content-selectors
其他回答
如果你想对你想要的内容应用样式。简单的技巧。 Td{边框:1px纯黑色;} Td:空{背景:石灰;} Td:empty::after{内容:"male";} <表> < tr > 彼得< td > < / td > < td > < !——男——> < / td > < td > 34道明> < / < / tr > < tr > < td > Susanne td > < / 女性< td > < / td > < td > 14道明> < / < / tr > 表> < /
https://jsfiddle.net/hyda8kqz/
如果你使用的是Chimp / Webdriver。io,他们支持比CSS规范更多的CSS选择器。
例如,这将点击第一个包含“坏熊”字样的锚:
browser.click("a*=Bad Bear");
所有这些都是很好的答案,但我认为我可以添加一些在实际场景中对我有用的东西:利用CSS的aria-label属性。
对于那些不知道的读者:aria-label是一个属性,它与其他类似的属性一起使用,让屏幕阅读器知道什么是什么,以防有视力障碍的人在使用你的网站。许多网站将这些属性添加到包含图像或文本的元素中,作为“描述符”。
这使得它高度特定于网站,但如果你的元素包含这个,使用属性的内容选择该元素是相当简单的:
HTML:
<td aria-label="male">Male</td>
<td aria-label="female">Female</td>
CSS:
td[aria-label="male"] {
outline: 1px dotted green;
}
从技术上讲,这与使用数据属性解决方案是一样的,但如果你不是网站的作者,这也适用于你,而且这不是一些专门为支持此用例而设计的过时解决方案;它本身是相当常见的。它的一个缺点是,实际上不能保证您想要的元素将具有此属性。
做这样的小过滤器:
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')
}
})
})
恐怕这是不可能的,因为内容没有属性,也不能通过伪类访问。CSS3选择器的完整列表可以在CSS3规范中找到。