我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
当前回答
你可以将内容设置为数据属性,然后使用属性选择器,如下所示:
/* 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());
});
});
其他回答
看起来他们是在考虑CSS3规范,但它没有被削减。
:contains() CSS3选择器http://www.w3.org/TR/css3-selectors/#content-selectors
你必须添加一个名为data-gender的数据属性,带一个男性或女性值,并使用属性选择器:
HTML:
<td data-gender="male">...</td>
CSS:
td[data-gender="male"] { ... }
做这样的小过滤器:
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')
}
})
})
我发现属性选项是你最好的选择,如果你不想使用javascript或jquery。
例如,在HTML中,用ready来样式所有的表格单元格:
<td status*="ready">Ready</td>
然后在css中:
td[status*="ready"] {
color: red;
}
如果你想对你想要的内容应用样式。简单的技巧。 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/