將樣式應用於所有鏈接元素

Question

我不確定這在 wordpress 中是否可行，但我需要通過在 style.css 中添加代碼來設置主題中所有<a herf=""></a>元素的樣式。

樣式需要應用於所有鏈接，除了按鈕中的鏈接和放置菜單的 header 部分中的鏈接。 下面的代碼不起作用

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 鏈接規則，因此它優先於您的規則。

您需要更具體地定位目標元素，例如：

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

特異性是瀏覽器決定哪些 CSS 屬性值與元素最相關並因此將被應用的方法。 […] 特異性是應用於給定 CSS 聲明的權重，由匹配選擇器中每個選擇器類型的數量決定。 當多個聲明具有相同的特異性時，在 CSS 中找到的最后一個聲明將應用於元素。

— MDN 來源

此外，如果您使用的是子主題，請確保您的樣式表排在您（父）主題的樣式表之后。

將父主題 styles 設置為子主題樣式表的依賴項將確保子主題樣式表在其后加載。

官方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')
    );
}

至於你問題的這一部分：

樣式需要應用於所有鏈接，除了按鈕中的鏈接和放置菜單的 header 部分中的鏈接。

您可以使用:not()偽類（也稱為否定偽類）來排除您的按鈕和 header 部分。

這看起來像這樣：

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

假設您要定位所有<button>和<header>元素。

Answer 2

您也許可以使用一些 JavaScript （小提琴）。

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')
  }
}

如果您知道 header 或菜單的 class 名稱，這將起作用。

並使用此 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;
}