任何方式来设置标签云小部件的样式，有很多不同的类名

Posted 2023-03-06

【中文标题】任何方式来设置标签云小部件的样式，有很多不同的类名

【英文标题】：Any way to style a tag cloud widget, with lots of different class names

【发布时间】：2011-09-09 15:20:26

【问题描述】：

我正在使用 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 来捕获所有独立于数字的标签链接？

【问题讨论】：

有父元素吗？可以提供吗？

@Jared Farrish 标签都包含在

见***.com/questions/6258278/…

【参考方案1】：

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

CSS 3

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

【讨论】：

只要你在中国等IE6是最流行的浏览器的国家不提供太多流量。

【参考方案2】：

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

.tag-link  font-size:10px; 

然后将它附加到每个元素上。

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

【讨论】：

删除你的类中的点。 （我提交了修改，但没有权限）

【参考方案3】：

在这种情况下，您有两个适合您的选项。

选项 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 函数的文档，请参阅 this

选项 3：修改 Wordpress Widget 文件

您始终可以进入您的 wordpress 文件并修改输出中显示的内容。我建议删除 style="font-size: 8pt;" 位，然后使用 Option 1 设置链接样式。

选项 3 的缺点是您失去了标签云功能，该功能使链接在更频繁出现时变得更大。这对您来说可能无关紧要，但值得考虑。

【讨论】：

哦，一个父选择器... Whoda 想... ;0（注意，我给了你一票）我也喜欢 jQuery 位。

有一个父元素，但 .custom .tagcloud a font-size: 10px 不起作用。在 wordpress 中，由于某种原因，它说 8pt，而不是 8 px，但无论如何，我尝试了 10px 和 10 pt，但它不起作用。

@Michael - .custom 来自哪里？您能否针对此特定问题发布更多标记？

如果字体大小被硬编码到 html 文档中，则无法使用 CSS 覆盖字体大小。使用选项 2 将允许您设置新的字体大小。我在答案中添加了第三个选项，也许这会有所帮助。

@Wex 你可以使用 !important 覆盖 CSS 的内联样式。我几乎在同一时间将其包含在我的答案中。

【参考方案4】：

如果所有标签都获得相同的样式，你可以不这样做：

.tagcloud a font-size: 10px

如果不是，请澄清您的问题。 谢谢！

编辑如果您不担心 css 验证，您可以使用 .custom a font-size:10px !important; 覆盖内联样式。如果可以选择使用 jQuery，请删除内联样式：$('.tagcloud a').removeAttr('style');