WordPress中无类名多层ul li标签CSS样式失效问题咨询

为什么你的CSS只有第一个生效？ #

你的HTML结构里，ul的直接子元素是4个并列的li，每个li的直接子元素是h2——没有嵌套的多层li结构。而你写的.main_txt ul li > li h2这类选择器，是在找li的直接子级li，这在当前结构里完全不存在，所以后面的样式根本找不到匹配元素，自然不生效。

无需加类名的解决方案 #

用CSS的结构伪类选择器，可以直接定位到不同位置的li，不用给任何标签加类名：

/* 所有li里的h2基础样式 */
.main_txt ul li h2 {
    color: #c00579;
}

/* 第2个li里的h2 */
.main_txt ul li:nth-child(2) h2 {
    color: #ff0000;
}

/* 第3个li里的h2 */
.main_txt ul li:nth-child(3) h2 {
    color: #1eff00;
}

/* 第4个li里的h2 */
.main_txt ul li:nth-child(4) h2 {
    color: #1900ff;
}

如果需要更语义化的选择，也可以替换成这些伪类：

• :first-child：匹配第一个子元素（对应text1）
• :last-child：匹配最后一个子元素（对应text4）
• :nth-of-type(n)：和:nth-child(n)效果一致（当前结构下所有子元素都是li，两者无区别）

逻辑验证 #

这个方案完全适配你的现有HTML结构，每个选择器都会精准定位到对应位置的li下的h2，不需要修改任何HTML标签，也不用额外添加类名。

内容的提问来源于stack exchange，提问作者Developer