css选择器包含内容,是否有包含特定文本的元素的CSS选择器？
回答(15)
2 years ago
您可以匹配元素，元素中屬性的名稱以及元素中命名屬性的值 . 但是，我沒有看到任何元素內的匹配內容 .
2 years ago
使用jQuery：
$('td:contains("male")')
2 years ago
看起來他們正在考慮CSS3規范 but it didn't make the cut .
2 years ago
您必須向名為 data-gender 的行添加數據屬性，并使用 male 或 female 值并使用屬性選擇器：
HTML：
...CSS：
td[data-gender="male"] { ... }
2 years ago
實際上有一個非常概念性的基礎，為什么沒有實現這一點 . 它基本上是3個方面的組合：
元素的文本內容實際上是該元素的子元素
您無法直接定位文本內容
CSS不允許使用選擇器提升
這三個一起意味著，當您擁有文本內容時，您無法提升回包含元素，并且您無法設置當前文本的樣式 . 這可能很重要，因為降序只允許單一跟蹤上下文和SAX樣式解析 . 涉及其他軸的升序或其他選擇器引入了對更復雜的遍歷或類似解決方案的需求，這將使CSS的應用極大地復雜化 .
2 years ago
您可以將內容設置為數據屬性，然后使用attribute selectors，如下所示：
/* Select every cell containing 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;
}
| Peter | male | 34 |
| Susanne | female | 14 |
您還可以使用jQuery輕松設置數據內容屬性：
$(function(){
$("td").each(function(){
var $this = $(this);
$this.attr("data-content", $this.text());
});
});
2 years ago
我擔心這是不可能的，因為內容不是屬性，也不能通過偽類訪問 . 可以在the CSS3 specification中找到CSS3選擇器的完整列表 .
2 years ago
對于那些希望進行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)element)[0];
}
如果有多個元素，這將返回第一個元素，因為在我的情況下，它總是一個元素 .
2 years ago
由于CSS缺少此功能，您必須使用javascript按內容設置單元格樣式 . 例如，包含xpath
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";
}
2 years ago
@ voyager關于使用 data-* 屬性的答案(例如 data-gender="female|male" 是截至2017年最有效且符合標準的方法：
[data-gender='male'] {background-color: #000; color: #ccc;}
幾乎可以實現大多數目標，因為有一些雖然有限的選擇器圍繞文本 . ::first-letter是pseudo-element，可以將有限樣式應用于元素的第一個字母 . 除了明顯選擇元素的第一行(例如段落)之外，還有一個::first-line偽元素，這也意味著很明顯CSS可用于擴展此現有功能以設置textNode的特定方面的樣式 .
直到這樣的倡導成功并實現了我可以建議的下一個最好的事情是使用空格分隔符來輸出 explode / split 單詞，輸出 span 元素內的每個單詞，然后如果單詞/樣式目標是可預測的，則結合使用:nth selectors：
$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
echo ''.$value1.';
}
否則，如果不能預測，再次使用voyager關于使用 data-* 屬性的答案 . 使用PHP的示例：
$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
echo ''.$value1.';
}
2 years ago
我同意the data attribute(旅行者的回答)應該如何處理，但CSS規則如下：
td.male { color: blue; }
td.female { color: pink; }
通?？梢愿菀自O置，特別是對于像angularjs這樣的客戶端庫，可以簡單到：
只要確保內容只有一個字！或者您甚至可以使用以下內容映射到不同的CSS類名：
為了完整性，這是數據屬性方法：
2 years ago
th::after { content: attr(data-value) }
td::after { content: attr(data-value) }
td[data-value]:not(:empty) {
color: fuchsia;
}
| ? | |
| ? |
ZeroWidthSpace用于更改顏色，可以使用vanilla JavaScript添加：
const hombres = document.querySelectorAll('td[data-value="male"]');
hombres.forEach(hombre => hombre.innerHTML = '?');
雖然
的結束標記may be omitted這樣做可能會導致它被視為非空 .2 years ago
這里的大多數答案試圖提供如何編寫HTML代碼以包含更多數據的替代方法，因為至少在CSS3中，您無法通過部分內部文本選擇元素 . 但它可以完成后，你只需要添加一些vanilla JavaScript，注意因為女性也包含男性它將被選中：
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)
}
});
| Peter | male | 34 |
| Susanne | female | 14 |
| Peter | male | 34 |
| Susanne | female | 14 |
2 years ago
例如，這將點擊包含單詞“Bad bear”的第一個錨點：
browser.click("a*=Bad Bear");
2 years ago
像這樣做小的過濾器小部件：
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')
}
})
})
總結
以上是生活随笔為你收集整理的css选择器包含内容,是否有包含特定文本的元素的CSS选择器？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开源协议介绍(GPL,LGPL,BSD,
- 下一篇： hdu2853 Assignment