css - 根据文本内容选择段落

Question

尝试使用 [attribute$=value]选择器 ( http://www.w3schools.com/cssref/sel_attr_end.asp ) 来更改 p 文本的颜色。我正在尝试选择最后一个 <p>以“关注”结尾的标签。我尝试使用 [p*="concern]但它没有用，所以我尝试使用它的相邻兄弟引用它 .resident_btn代码:.resident_btn + [p* = "concern"]但这也没有用。我不确定如何让它工作。有任何想法吗？

<div class="holder">
 <div class="row">
  <div class="col-md-6">
   <p>Pay your rent or schedule automatic payments quickly and securely.</p>
  </div>
 </div>
 <div class="row">
  <div class="col-md-6">
   <p>Have an issue in your apartment? Complete a request for maintenance and a member of our team will service your apartment as quickly as possible. </p>
  </div>
 </div>
 <div class="row">
  <div class="col-md-6">
   <a class="resident_btn" href="resident-contact-request.asp"></a>
   <p>How can we help? Contact the leasing team with any questions or concerns.</p>
  </div>
 </div>
</div>

Answer 1

仅使用 CSS 我能想到的唯一方法是:

• 将相同的内容字符串应用于 data-* 属性(在本例中为 data-content)
• 使用属性选择器定位元素 [data-content$="concerns."]

[data-content$="concerns."]{
    color:red;
}

<p data-content="Pay quickly and securely.">Pay quickly and securely.</p>
<p data-content="Request for maintenance.">Request for maintenance.</p>
<p data-content="Any questions or concerns.">Any questions or concerns.</p>

这是一个使用仅 data-* 属性的示例(没有实际的 HTML 内容)

[data-content]:before{
    content: attr(data-content);
}
[data-content$="concerns."]{
    color:red;
}

<p data-content="Pay quickly and securely."></p>
<p data-content="Request for maintenance."></p>
<p data-content="Any questions or concerns."></p>