В CSS можно ли различить guish две кнопки с одинаковым значением href в зависимости от содержимого внутри них? - PullRequest
1 голос
/ 13 января 2020

<a href="?&amp;" class="searchPageLink">« Back to Inbox</a>

имеет то же значение href, что и

<a href="?&amp;" class="searchPageLink">Refresh</a> на одной из моих страниц.


Если я установил пользовательский CSS для Во-первых, значения отступов и полей искажаются, когда я открываю другую страницу с той же кнопкой. Вы знаете способ различать guish обе сущности (я полагаю, основываясь на содержании внутри них?). Буду признателен за любую помощь.

Ответы [ 2 ]

1 голос
/ 13 января 2020

Вот простое Javascript решение по запросу.

var aTags = Array.prototype.slice.call(document.getElementsByTagName("a"));
var textToFind = "« Back to Inbox";

aTags.forEach(function(element){
  if(element.textContent == textToFind) {
  	element.style.color = 'red';
  }
})
<a href="?&amp;" class="searchPageLink">« Back to Inbox</a>

<a href="?&amp;" class="searchPageLink">Refresh</a> in one of my pages.

Здесь также приведен пример модификации CSS с HTML согласно запросу:

a[data-name="inbox"] {
  color: red;
}
<a href="?&amp;" class="searchPageLink" data-name="inbox">« Back to Inbox</a>

<a href="?&amp;" class="searchPageLink" data-name="refresh">Refresh</a> in one of my pages.

Ссылка: JSFiddle

Удачи!

Дайте мне знать, если вы хотите увидеть решение JQuery!

0 голосов
/ 13 января 2020

$($('.mydiv').find("a")[1]).css("background-color", "green") //Play with second link js
.mydiv a:first-child{background-color:yellow} /*play with first link css*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='mydiv'>
  <a href="?&amp;" class="searchPageLink">« Back to Inbox</a><br/>
  <a href="?&amp;" class="searchPageLink">Refresh</a> 
</div>
...