Применить стиль ко всем элементам ссылок

Question

Я не уверен, возможно ли это в WordPress, но мне нужно стилизовать все элементы <a herf=""></a> в теме, добавив код в стиле. css.

Стиль должен применяться ко всем ссылкам за исключением ссылок в кнопках и в разделе заголовка, где размещено меню. Код ниже не работает

a:link {
  color: red;
  text-decoration: none;
  text-transform: uppercase;
}
a:hover {
  color: blue;
  text-decoration: none;
  text-transform: uppercase;
}

a:active{
  color: purple;
  text-decoration: none;
  text-transform: uppercase;
}

Answer 1

Ваша CSS, вероятно, не работает, потому что ваша тема WordPress уже содержит некоторые CSS правила для ссылок, поэтому она имеет приоритет над вашими правилами.

Вы должны быть более точными c в целевые элементы, например:

a {}
a.some-class {} /* more specific */
body a.some-class {} /* even more specific */

Specificity - это средство, с помощью которого браузеры решают, какие CSS значения свойств наиболее актуальны для элемента и, следовательно, , будет применяться. […] Специфичность - это вес, который применяется к данному объявлению CSS, определяемый номером каждого типа селектора в соответствующем селекторе. Когда несколько объявлений имеют одинаковую специфичность, к элементу применяется последнее объявление, найденное в CSS.

- Источник MDN

Кроме того, если вы при использовании дочерней темы убедитесь, что таблицы стилей ставятся в очередь после таблицы стилей вашей (родительской) темы.

Установка стилей родительской темы в качестве зависимости таблицы стилей вашей дочерней темы обеспечит загрузку таблицы стилей дочерней темы. после него.

Официальная документация WordPress содержит следующий пример:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

Что касается этой части вашего вопроса:

стиль должен применяться ко всем ссылкам, кроме ссылок в кнопках и в разделе заголовка, где размещено меню.

Вы можете использовать псевдокласс :not(), также известный как псевдокласс для исключения ваших кнопок и раздела заголовка.

Это будет выглядеть так:

:not(button) a, :not(header) a {
  /* links styling rules */
}

при условии, что вы хотите настроить таргетинг на все <button> и * 104 2 * элемента.

Answer 2

Возможно, вы могли бы использовать JavaScript ( fiddle ).

const anchors = Array.from(document.querySelector('a'))
for (const anchor of anchors) {
  if (!anchor.closest('button') && !anchor.closest('.header-class-name')) {
    anchor.classList.add('my-link')
  }
}

Это будет работать, если вы знаете имя класса заголовка или меню.

И используйте это CSS.

.my-link {
  color: red;
  text-decoration: none;
  text-transform: uppercase;
}
.my-link:hover {
  color: blue;
  text-decoration: none;
  text-transform: uppercase;
}

.my-link:active{
  color: purple;
  text-decoration: none;
  text-transform: uppercase;
}