如何在CSS中选择同一class下的多个指定元素？

你当前的CSS写法存在选择器分组逻辑错误：

.skill-row h3,p  {
  text-align : left;
}

这里的逗号是CSS选择器的分组语法，相当于同时生效两个独立选择器：.skill-row h3（正确选中skill-row下的h3）和p（选中页面中所有p元素），这就是为什么所有p都被设置成左对齐的原因。

正确的写法有两种： #

1. 给每个目标选择器都加上父级限定：

.skill-row {
  width      : 50%;
  margin     : 100px auto 100px auto;
  text-align : center;
}
.skill-row h3, .skill-row p  {
  text-align : left;
}

2. 使用:is()伪类简化写法（现代浏览器均支持）：

.skill-row {
  width      : 50%;
  margin     : 100px auto 100px auto;
  text-align : center;
}
.skill-row :is(h3, p)  {
  text-align : left;
}

这两种写法都能精准选中skill-row容器下的h3和p元素，不会影响页面其他位置的p标签。

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