Có bộ chọn CSS cho các thành phần có chứa văn bản nhất định không?

Tôi đang tìm kiếm một bộ chọn CSS cho bảng sau:

Peter    | male    | 34
Susanne  | female  | 12

Có bộ chọn nào phù hợp với tất cả các TD có chứa "nam" không?

Nếu tôi đọc các đặc điểm kỹ thuật chính xác, không.

Bạn có thể khớp trên một phần tử, tên của một thuộc tính trong phần tử và giá trị của một thuộc tính được đặt tên trong một phần tử. Tuy nhiên, tôi không thấy bất cứ điều gì phù hợp với nội dung trong một yếu tố.

Sử dụng jQuery:

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

Có vẻ như họ đã suy nghĩ về nó cho thông số CSS3 nhưng nó không thực hiện được .

:contains()Bộ chọn CSS3 http://www.w3.org/TR/css3-selector/#content-selector

Bạn sẽ phải thêm một thuộc tính dữ liệu vào các hàng được gọi data-genderbằng a malehoặc femalevalue và sử dụng bộ chọn thuộc tính:

HTML:

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

CSS:

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

Thực sự có một cơ sở khái niệm cho lý do tại sao điều này đã không được thực hiện. Nó là sự kết hợp của 3 khía cạnh cơ bản:

1. Nội dung văn bản của một yếu tố thực sự là con của yếu tố đó
2. Bạn không thể nhắm mục tiêu nội dung văn bản trực tiếp
3. CSS không cho phép thăng thiên với bộ chọn

Cả 3 cùng có nghĩa là vào thời điểm bạn có nội dung văn bản, bạn không thể quay lại thành phần chứa và bạn không thể định kiểu văn bản hiện tại. Điều này có thể có ý nghĩa vì giảm dần chỉ cho phép theo dõi số ít bối cảnh và phân tích cú pháp kiểu SAX. Tăng dần hoặc các bộ chọn khác liên quan đến các trục khác đưa ra nhu cầu về các giải pháp tương tự phức tạp hơn hoặc tương tự sẽ làm phức tạp đáng kể việc áp dụng CSS vào DOM.

Bạn có thể đặt nội dung làm thuộc tính dữ liệu và sau đó sử dụng bộ chọn thuộc tính , như được hiển thị ở đây:

/* 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;
}

<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>

Bạn cũng có thể sử dụng jQuery để dễ dàng đặt các thuộc tính nội dung dữ liệu:

$(function(){
  $("td").each(function(){
    var $this = $(this);
    $this.attr("data-content", $this.text());
  });
});

Vì CSS thiếu tính năng này, bạn sẽ phải sử dụng JavaScript để định kiểu các ô theo nội dung. Ví dụ với XPath's contains:

var elms = document.evaluate( "//td[contains(., 'male')]", node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null )

Sau đó sử dụng kết quả như vậy:

for ( var i=0 ; i < elms.snapshotLength; i++ ){
   elms.snapshotItem(i).style.background = "pink";
}

https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/

Tôi sợ điều này là không thể, bởi vì nội dung không có thuộc tính và cũng không thể truy cập được thông qua một lớp giả. Danh sách đầy đủ các bộ chọn CSS3 có thể được tìm thấy trong đặc tả CSS3 .

Đối với những người đang tìm cách thực hiện các lựa chọn văn bản CSS Selenium, tập lệnh này có thể được sử dụng.

Mẹo nhỏ là chọn cha mẹ của phần tử mà bạn đang tìm kiếm, sau đó tìm kiếm phần tử có văn bản:

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];
}

Điều này sẽ trả về phần tử đầu tiên nếu có nhiều phần tử vì nó luôn là một phần tử, trong trường hợp của tôi.

Tôi đồng ý thuộc tính dữ liệu (câu trả lời của chuyến đi) là cách xử lý nó, NHƯNG, các quy tắc CSS như:

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

thường có thể dễ dàng hơn nhiều để thiết lập, đặc biệt với các lib phía máy khách như angularjs có thể đơn giản như:

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

Chỉ cần chắc chắn rằng nội dung chỉ có một từ! Hoặc thậm chí bạn có thể ánh xạ tới các tên lớp CSS khác nhau bằng:

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

Để hoàn thiện, đây là cách tiếp cận thuộc tính dữ liệu:

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

Câu trả lời của @ Journeyager về việc sử dụng data-*thuộc tính (ví dụ: cách tiếp cận tuân thủ tiêu chuẩndata-gender="female|male" và hiệu quả nhất kể từ năm 2017:

[data-gender='male'] {background-color: #000; color: #ccc;}

Khá nhiều mục tiêu có thể đạt được vì có một số bộ chọn giới hạn mặc dù được định hướng xung quanh văn bản. Chữ cái đầu tiên là một phần tử giả có thể áp dụng kiểu dáng giới hạn cho chữ cái đầu tiên của một phần tử. Ngoài ra còn có một phần tử giả dòng đầu tiên bên cạnh việc rõ ràng chọn dòng đầu tiên của một phần tử (chẳng hạn như đoạn văn) cũng ngụ ý rằng rõ ràng CSS có thể được sử dụng để mở rộng khả năng hiện có này để định kiểu các khía cạnh cụ thể của textNode .

Cho đến khi việc vận động đó thành công và được triển khai, điều tốt nhất tiếp theo tôi có thể đề xuất khi áp dụng là explode/ splitsử dụng một dấu phân cách không gian, xuất từng từ riêng lẻ bên trong một thành spanphần và sau đó nếu mục tiêu từ / kiểu dáng có thể dự đoán được sử dụng kết hợp với : bộ chọn thứ n :

$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
 echo '<span>'.$value1.'</span>;
}

Khác, nếu không dự đoán được , một lần nữa, sử dụng câu trả lời của chuyến đi về việc sử dụng data-*thuộc tính. Một ví dụ sử dụng PHP:

$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
 echo '<span data-word="'.$value1.'">'.$value1.'</span>;
}

Nếu bạn đang sử dụng Chimp / Webdo.io , họ hỗ trợ nhiều bộ chọn CSS hơn so với thông số CSS.

Điều này, ví dụ, sẽ nhấp vào neo đầu tiên có chứa từ "Gấu xấu":

browser.click("a*=Bad Bear");

Hầu hết các câu trả lời ở đây đều cố gắng đưa ra giải pháp thay thế cho cách viết mã HTML để bao gồm nhiều dữ liệu hơn vì ít nhất lên đến CSS3, bạn không thể chọn một phần tử bằng văn bản bên trong một phần. Nhưng nó có thể được thực hiện, bạn chỉ cần thêm một chút JavaScript vanilla, chú ý vì nữ cũng chứa nam nó sẽ được chọn:

      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>

Tôi thấy tùy chọn thuộc tính là lựa chọn tốt nhất của bạn nếu bạn không muốn sử dụng javascript hoặc jquery.

Ví dụ: để tạo kiểu cho tất cả các ô của bảng với từ đã sẵn sàng, Trong HTML thực hiện điều này:

 <td status*="ready">Ready</td>

Sau đó trong css:

td[status*="ready"] {
        color: red;
    }

Bạn cũng có thể sử dụng contentvới attr()và các kiểu bảng ô là ::not :empty

th::after { content: attr(data-value) }
td::after { content: attr(data-value) }
td[data-value]:not(:empty) {
  color: fuchsia;
}

<table>
  <tr>
    <th data-value="Peter"></th>
    <td data-value="male">&#x0200B;</td>
    <td data-value="34"></td>
  </tr>
  <tr>
    <th data-value="Susanne"></th>
    <td data-value="female"></td>
    <td data-value="12"></td>
  </tr>
  <tr>
    <th data-value="Lucas"></th>
    <td data-value="male">&#x0200B;</td>
    <td data-value="41"></td>
  </tr>
</table>

A ZeroWidthSpaceđược sử dụng để thay đổi màu sắc và có thể được thêm bằng JavaScript vanilla:

const hombres = document.querySelectorAll('td[data-value="male"]');
hombres.forEach(hombre => hombre.innerHTML = '​');

Mặc dù <td>thẻ kết thúc s có thể bị bỏ qua vì vậy có thể khiến nó được coi là không trống.

Nếu bạn không tự tạo DOM (ví dụ: trong bản mô tả người dùng), bạn có thể thực hiện các thao tác sau với JS thuần túy:

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>

Bảng điều khiển đầu ra

text: <td> Peter
text: <td> male
text: <td> 34
text: <td> Susanne
text: <td> female
text: <td> 12
male: <td text="male"> male

Thực hiện các Widget lọc nhỏ như thế này:

    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')
            }
        })
    })

Cú pháp của câu hỏi này trông giống như cú pháp Robot Framework. Trong trường hợp này, mặc dù không có bộ chọn css mà bạn có thể sử dụng để chứa, nhưng có một từ khóa SeleniumL Library mà bạn có thể sử dụng thay thế. Các Chờ cho đến khi phần tử Có .

Thí dụ:

Wait Until Element Contains  | ${element} | ${contains}
Wait Until Element Contains  |  td | male