nth-child选择器失效及图标与文本对齐异常问题排查

问题一：nth-child选择器未正常工作的原因及修复 #

你当前写的.progLang:nth-child(1)是匹配自身为父元素第一个子元素的.progLang元素，但每个<h3 class="progLang">都是其父元素<li>的第一个子元素（每个li内第一个元素都是h3），所以所有progLang都会匹配这个选择器，导致第一个样式全局生效。

正确写法是先定位到第n个<li>，再选中内部的progLang，修改后的选择器如下：

/* 选中第一个li里的progLang */
li:nth-child(1) .progLang {
    color: #f06529; 
}

li:nth-child(1) .progLang:after {
    content: url("html5-icon.png");
}

/* 选中第二个li里的progLang */
li:nth-child(2) .progLang {
    color: #264de4;
}

li:nth-child(2) .progLang:after {
    content: url("css-icon.png");
}

问题二：:after伪元素图标与文本不对齐的修复 #

用content: url()插入的图标属于替换元素，默认垂直对齐方式会导致它和文本基线错位，出现图标偏高的情况。只需给伪元素添加垂直对齐属性即可修正：

在现有的:after样式中加入vertical-align: middle;，还可按需添加间距调整，示例代码：

li:nth-child(1) .progLang:after {
    content: url("html5-icon.png");
    vertical-align: middle;
    margin-left: 0.5rem; /* 可选：给图标和文本加间距 */
}

li:nth-child(2) .progLang:after {
    content: url("css-icon.png");
    vertical-align: middle;
    margin-left: 0.5rem;
}

完整修正后的CSS代码 #

.skillSet {
    margin: 6rem 1rem 1rem 1rem;
    padding: 8px;
}

.skillSet h2 {
    border-left: 8px solid black;
    text-indent: 0.5rem;
    margin-bottom: 5rem;
}

.skillSet ul {
    margin: 1rem 0.5rem 1rem 0.5rem;
}

li {
    list-style: none;
    margin-bottom: 5rem;
}

li:nth-child(1) .progLang {
    color: #f06529; 
}

li:nth-child(1) .progLang:after {
    content: url("html5-icon.png");
    vertical-align: middle;
    margin-left: 0.5rem;
}

li:nth-child(2) .progLang {
    color: #264de4;
}

li:nth-child(2) .progLang:after {
    content: url("css-icon.png");
    vertical-align: middle;
    margin-left: 0.5rem;
}

.abbr {
    font-size: 12px;
}

内容的提问来源于stack exchange，提问作者ImAWeebキズネです