如果 标签包含以“Read:”开头，则选择所有 元素使用 CSS？ [复制]答案

【问题标题】：Selects all elements if Tag Contains Start with "Read:" Using CSS? [duplicate]如果 标签包含以“Read:”开头，则选择所有 元素使用 CSS？ [复制]
【发布时间】：2021-08-29 10:07:29
【问题描述】：

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

有数百个标签，如下所示。

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

那些以 Read: 开头。

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

【问题讨论】：

CSS 没有任何针对内容的选择器。一行JS就可以搞定。
如果您控制 DOM，则为每个要读取的 p 标签设置一个数据属性。然后你可以使用像p[data-read="true"] { //some style }这样的CSS设置像Read: //something这样的p标签

标签： css css-selectors

【解决方案1】：

这仅靠 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>

【讨论】：

【解决方案2】：

<!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";
       }
    }

【讨论】：

有 ``startWith` 来改善问题:)
感谢您指出@Sysix。我在代码中添加了必要的更改，现在它可以正常工作了，