Любой способ стилизации виджета облака тегов с множеством разных имен классов

Question

Я использую 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, который будет захватывать все ссылки тегов независимо от числа?

Answer 1

Нет обратной совместимости, нет.

CSS 3

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

Answer 2

В этом сценарии у вас есть два варианта, которые хорошо вам подойдут.

Вариант 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( ... );

См. this для получения документации о том, как использовать функцию CSS в jQuery

.

Вариант 3: Изменить файл виджета Wordpress

Вы всегда можете зайти в свои файлы WordPress и изменить то, что отображается в выводе. Я бы порекомендовал удалить style="font-size: 8pt;" bit, а затем использовать Option 1 для стилизации ссылок.

Недостатком варианта 3 является то, что вы теряете функциональность облака тегов, которая делает ссылки больше по мере их появления. Это может не иметь значения для вас, но это то, что нужно учитывать.

Answer 3

Если все теги имеют одинаковый стиль, вы не можете:

.tagcloud a {font-size: 10px}

Если нет, пожалуйста, уточните свой вопрос.Спасибо!

edit , если вы не беспокоитесь о проверке css, вы можете использовать .custom a {font-size:10px !important;} для переопределения встроенных стилей.Если вы используете jQuery, удалите встроенные стили: $('.tagcloud a').removeAttr('style');

Answer 4

Я бы определил бесчисленный класс для хранения всей информации общего стиля.

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

Затем присоедините его к каждому элементу.

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