我的wordpress博客上各种链接的不同颜色的CSS代码

Question

我即将创建一个新博客，但在启动它之前，我想测试它的所有功能。所以我不擅长 CSS 或任何其他编码。我想知道如何在我的所有博客文章中以绿色显示我的博客的内部链接，以红色显示指向其他网站（外部链接）的链接以及以蓝色显示指向亚马逊或 Ebay 的附属链接。

拜托，谁能在我即将发布的 wordpress 博客上告诉我怎么做？

Answer 1

根据您的链接约定，您“可以”做出一些假设并使用attribute selectors。

以下内容基于内部链接不是绝对的假设。例如 <a href="/somepath/to/somepage"> 和外部路径是绝对的（它们必须是），例如 <a href="https://www.google.com">

/*Default style, applied to internal links*/
a {color:red;}
/*href contains // therefore absolute, and therefore external*/
a[href*='//'] {color:blue;}
/*href starts with #, therefore a link to an element on the page*/
a[href^="#"] {color:black;}

<a href="http://www.google.com">Google - External</a>
<a href="//apple.com">Apple - External</a>
<a href="/some/internal/link">Intneral</a>
<a href="#internaPage">Links to internal page Id</a>

但是

我可能会明确说明并使用类。不做任何假设，您可以控制

/*Default style, applied to internal links*/
a {color:red;}
/*class for external links*/
a.external {color:blue;}
/*class for links to page id*/
a.idLink {color:black;}

<a href="http://www.google.com" class="external">Google - External</a>
<a href="//apple.com" class="external">Apple - External</a>
<a href="/some/internal/link">Intneral</a>
<a href="#internaPage" class="idLink">Links to internal page Id</a>

Answer 2

你应该使用 css 属性选择器……像这样：

// All green
a {
    color: green;
}

// External red
a[href*="//"] {
    color: red;
}

// Amazon and ebay blue
a[href*="amazon.com"], a[href*="ebay.com"] {
    color: blue;
}

你可以这样选择：

• [attribute=value]：准确值
• [attribute*=value]：某处的价值
• [attribute^=value]: 初始值
• [attribute$=value]: 结尾的值

有了这个，您可以根据链接的 href 属性选择链接，并根据需要设置它们的样式……您明白我的意思了吗？

检查特定页面上的链接的一个很好的解决方案是Integrity for Mac 那是一个列出页面所有链接的应用程序。