CSS跨度定义中的特定链接答案

【问题标题】：specific link in CSS span definitionCSS跨度定义中的特定链接
【发布时间】：2015-02-20 06:36:02
【问题描述】：

我目前正在写几个 html 页面，有些单词需要有样式（粗体、斜体）和链接。有没有办法在 CSS 中包含特定的超链接，这样如果我定义类似

span.myword {
     something that will link to a specific url
}

这样我就可以写出类似的东西 “[div] blah blah [span class="myword"]选定的单词[/span] blah blah[/div]” 并在 span 类中包含一个超链接。

提前感谢您的帮助

【问题讨论】：

你不能在CSS中包含HTML元素
不可能你可以使用包裹在<a>标签中的span

标签： html css hyperlink

【解决方案1】：

您不能严格在 CSS 中创建跨度超链接。但是，您可以执行以下操作：

a[href='http://www.google.com']
{
    //Apply styles to links to Google.
}

JSFiddle

您也可以只将一个类应用于<a> 元素：

<div>
    blah blah
    <a href="#" class="myword">selected words</a>
    blah blah
</div>

那么样式如下：

a.myword
{
    //Insert CSS here
}

【讨论】：

【解决方案2】：

如果您愿意接受 jQuery 解决方案，那么有一个。

只需将 .link 类添加到您要创建的每个链接，在 javascript 变量中定义自定义键和 URL，然后 BAM！它使用 span 内的单词从 javascript 对象中提取 URL。：

HTML：

<span class="link">Google</span>
<span class="link">Facebook</span>
<span class="link">StackOverflow</span>

jQuery:

var links = {};
links["Google"] = "http://www.google.com";
links["Facebook"] = "http://www.facebook.com";
links["StackOverflow"] = "http://www.stackoverflow.com";

$(function(){
    $("span.link").click(function(){
       window.open(links[$(this).html()]); 
    });
});

CSS：

span.link
{
    color: blue;
    text-decoration: underline;
    cursor:pointer;
}

JSFiddle

【讨论】：

【解决方案3】：

你可以像我一样这样做。

<div class="entry-content">
<p>test test test test<a href="http://www.google.com">www.google.com</a> to learn more.</p>
</div>

CSS 样式：

.entry-content p a {
color: #f47727;
}

您可以根据需要使用粗体或斜体来设置样式..

【讨论】：

谢谢，但我们的目的是尽量不必为这些特定的单词输入这些冗长且重复的 URL，我正在寻找一种方法来定义一种以某种方式包含所有（每个word 指的是特定的 URL。