Блог

Попытка использовать [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>
  

Используя только 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>