我正在寻找下表的CSS选择器:

Peter    | male    | 34
Susanne  | female  | 12

是否有任何选择器来匹配所有包含“男性”的td ?


当前回答

如果你想对你想要的内容应用样式。简单的技巧。 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/

其他回答

对于那些希望进行Selenium 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];
}

如果有多个元素,它将返回第一个元素因为在我的例子中,它总是一个元素。

你必须添加一个名为data-gender的数据属性,带一个男性或女性值,并使用属性选择器:

HTML:

<td data-gender="male">...</td>

CSS:

td[data-gender="male"] { ... }

我同意数据属性(旅行者的答案)是它应该如何处理的,但是,CSS规则如下:

td.male { color: blue; }
td.female { color: pink; }

通常可以更容易地设置,特别是使用像angularjs这样的客户端库,它可以简单到:

<td class="{{person.gender}}">

只要确保内容只有一个词!或者你甚至可以映射到不同的CSS类名:

<td ng-class="{'masculine': person.isMale(), 'feminine': person.isFemale()}">

为了完整起见,下面是数据属性方法:

<td data-gender="{{person.gender}}">

使用jQuery:

$('td:contains("male")')

如果你不自己创建DOM(例如在用户脚本中),你可以用纯JS做以下事情:

(注:文件 console.debug(文本:“文本:”,t.d., t.d.) td。setAttribute(“文本”,td innerText)。 的 (td . queryctorall) 控制台.debug(“male:”,t.d., t.d.内文) < table > < tr > 彼得< td > < / td > < td >男< / td > 34 < / td > < td > < / tr > < tr > < td >苏珊< / td > < td >女性< / td > 12 < / td > < 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