使用多种不同的类名来样式化标签云小部件的任何方法

问题描述

|| 我正在使用wordpress托管博客。他们有一个标签云小部件。标签是这样的。类名随每个标签而变化

<a class=\"tag-link-9\" title=\"1 topic\" style=\"font-size: 8pt;\">Blah Blah</a>

<a class=\"tag-link-10\" title=\"1 topic\" style=\"font-size: 8pt;\">Blah Blah X</a>

父元素是

<div class=\"tagcloud\">

通常，使用我正在使用的主题，我可以添加这样的自定义样式

.custom .tag-link-1- {font-size: 10px}

但是随着类名称更改每个标签，我必须不断添加新样式。有没有办法做一个CSS，将捕获所有独立于数字的标记链接？     

解决方法

        不是以向后兼容的方式，不是。 CSS 3

a[class^=\'tag-link-\'] {
    font-size:10px;
}

    ,        我将定义一个无数类来保存所有常见样式信息。

.tag-link { font-size:10px; }

然后将其附加到每个元素。

<a class=\"tag-link tag-link1\">Link</a>

    ,        在这种情况下，您有两种选择非常适合您。 选项1：使用CSS选择器 如果您的代码包含在div中，则：

<div id=\"tag-cloud\">
  <a class=\"tag-link-9\" title=\"1 topic\" style=\"font-size: 8pt;\">Blah Blah</a>
  .
  .
  .
</div>

使用此CSS：

#tag-cloud a { ... } /* Each tag will be styled */

选项2：使用jQuery！ 如果您找不到选项1，则可以始终使用jQuery设置元素的样式：

$(\'a[class^=\"tag-link\"]\').css( ... );

请参阅此文档以获取有关如何在jQuery中使用CSS函数的文档 选项3：修改Wordpress窗口小部件文件 您总是可以进入您的wordpress文件并修改在输出中显示的内容。我建议删除

style=\"font-size: 8pt;\"

位，然后使用选项1设置链接的样式。 选项3的缺点是您失去了标签云功能，该功能会使链接在更频繁出现时变大。这对您可能并不重要，但这是需要考虑的事情。     ,        如果所有标签都具有相同的样式，则您不能这样做：

.tagcloud a {font-size: 10px}

如果没有，请澄清您的问题。 谢谢！ 如果您不担心CSS验证，请进行编辑，您可以使用ѭ11来覆盖内联样式。如果可以使用jQuery，请删除内联样式：:12ѭ