在 CSS 中，我可以根据两个按钮中的内容来区分两个具有相同 href 值的按钮吗?

Question

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

具有与 相同的 href 值

<a href="?&amp;" class="searchPageLink">Refresh</a>在我的一个页面中。

---

如果我为其中一个设置自定义 CSS，则当我使用相同的按钮打开另一个页面时，填充和边距值会扭曲。你知道一种区分这两个实体的方法吗(我是根据它们里面的内容猜测的？我将不胜感激任何帮助。

Answer 1

这是根据要求提供的简单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解决方案，请告诉我！

Answer 2

$($('.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>