子比主题美化教程：首页文章列表标签随机彩色样式实现指南

一、安装与使用步骤

1. 登录 WordPress 后台 → 外观 → 自定义 → 子比主题设置 → CSS 样式
2. 将代码粘贴至自定义 CSS区域
3. 保存并刷新首页查看效果

二、演示效果

CSS代码（一）

/*文章外部标签随机彩色 tox.wang*/
.item-tags a {
padding: 5px 10px;
border-radius: 5px;
margin-right: 5px;
}
.item-tags a.meta-pay {
background-color: #FFD700;
color: black;
}
.item-tags a.c-blue {
background-color: #1E90FF;
color: white;
}
.item-tags a[href*=”tag/”] {
background-color: #FF69B4;
color: white;
}

CSS代码（二）

/*文章外部标签随机彩色 tox.wang*/
.item-tags a {
padding: 6px 12px;
border-radius: 6px;
margin-right: 8px;
margin-bottom: 8px;
display: inline-block;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hover effect for all tags */
.item-tags a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Premium/paid content tag */
.item-tags a.meta-pay {
background-color: #ffd700;
color: #333;
border: 1px solid rgba(0, 0, 0, 0.1);
}

.item-tags a.meta-pay:hover {
background-color: #f7ce00;
}

/* Blue category tag */
.item-tags a.c-blue {
background-color: #2e86de;
color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
}

.item-tags a.c-blue:hover {
background-color: #1a74e2;
}

/* Standard tags */
.item-tags a[href*=”tag/”] {
background-color: #ff6b95;
color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
}

.item-tags a[href*=”tag/”]:hover {
background-color: #ff4f81;
}

/* Additional tag variations you can use */
.item-tags a.c-green {
background-color: #20bf6b;
color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
}

.item-tags a.c-green:hover {
background-color: #1caa5e;
}

.item-tags a.c-purple {
background-color: #9b59b6;
color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
}

.item-tags a.c-purple:hover {
background-color: #8e44ad;
}

/* Focus state for accessibility */
.item-tags a:focus {
outline: 2px solid #4a90e2;
outline-offset: 2px;
}