选择所有 元素如果 标签包含以 "Read:" 开头使用 CSS？

Question

我在数千页上有很多  标签。

有数百个  标签如下。

<p>Read: <a href="https://example.com" target="_blank" rel="noopener">Example</a></p>

以开头的阅读：。

我希望仅当段落以 Read: 开头时才将一些 CSS 应用于  标记。可能吗？

Answer 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>Read: More</p>
    <p>Read: More</p>
    <p>Hey</p>
    <p>Hello</p>
    <p>Lorem ipsum dolor sit amet, consectet Read: More</p>
    <script>
      let list = document.getElementsByTagName("p");
      for (let i = 0; i < list.length; i++) {
        if (list[i].textContent.startsWith("Read:")) {
          list[i].style.color = "red";
        }
      }
    </script>
  </body>
</html>

我不知道 CSS 是否有这样的选择器，但您仍然可以通过 JavaScript

实现您的目标

    let list = document.getElementsByTagName("p");
    for (let i = 0; i < list.length; i++) {
       if (list[i].textContent.startsWith("Read:")) {
           list[i].style.color = "red";
       }
    }

Answer 2

单独使用 CSS 是不可能的，您需要 Javascript 才能实现。

此示例向您展示...

#1。如何使用 Javascript 搜索文档 p 标签并使用 indexOf().

查找第一个索引设置为目标字符串 Read: 的字符串

#2。然后如何在该标签上设置属性 el.setAttribute()，将该元素标识为 Read: 元素，其中包含我们要在 CSS.

中影响的字符串

#3。如何使用 CSS + elements 属性然后根据需要设置 DOM 中的目标元素的样式。

const p = [...document.getElementsByTagName('p')] -> 创建一个然后我们可以使用 tag.forEach()
循环的元素数组
tag.textContent.indexOf("Read:") === 0-> 让我们找到元素在 tag.textContent.
的开头有目标字符串
tag.setAttribute("data-read", true) -> 设置标签 data-read 属性到true
p[data-read="true"] 在 CSS 中我们为所有 p 标签的元素设置样式并具有属性

使用此方法，我们可以使用 CSS 设置标签的样式并使用 JS 来查找它们。

const p = [...document.getElementsByTagName('p')]

p.forEach(tag=>tag.textContent.indexOf("Read:") === 0 ?  tag.setAttribute("data-read", true) : false)

p[data-read="true"] {
  background-color: lightgreen;
  font-weight: bold;
  color: darkgreen;
}

p[data-read="true"]:after {
  content: ' *';
}
p[data-read="true"]:before {
  content: '* ';
}

<div>
  <p>Read: some info</p>
  <p>Read: some info</p>
  <p>p tag content</p>
  <p>more ptag info</p>  
  <p>Perhaps the p content has a sentence that starts with the string and we do not want to get that one. Read: Speak: Listen:</p>
  <p>Read: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>

选择所有 <p> 元素如果 <p> 标签包含以 "Read:" 开头使用 CSS？

Selects all <p> elements if <p> Tag Contains Start with "Read:" Using CSS?

css

css-selectors