Question

我将要创建一个新博客，但是在启动它之前，我想测试它的所有功能。所以我对CSS或任何其他编码都不满意。我想知道如何在所有博客文章中以绿色显示我的博客的内部链接，以红色显示到其他站点的链接（外部链接），以及以蓝色显示到Amazon或Ebay的会员链接。 / p>

请，有人能在我即将到来的wordpress博客上告诉我该怎么做吗？

Answer 1

您应该使用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是检查特定页面上链接的一个很好的解决方案，那就是一个列出页面所有链接的应用。

Answer 2

根据您的链接约定，您可以“做一些假设并使用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>

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

2 个答案: