Question

尝试使用[attribute$=value]选择器（http://www.w3schools.com/cssref/sel_attr_end.asp）更改p文本的颜色。我试图选择最后以＆＃34;关注点结束的<p>标记。＆＃34;我尝试使用[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."]

＆＃13;

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

＆＃13;

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

＆＃13;

以下是使用 data- *属性（没有实际HTML内容）的示例

＆＃13;

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

＆＃13;

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

＆＃13;

根据文本内容选择段落

1 个答案: