如何使用CSS选择器获取DOM中三个标记为红色的指定元素

你可以直接使用多选择器组合匹配三个目标元素，具体代码如下：

.content_left > p.foo, .content_mid > p:nth-child(2), .content_right > p[data-type="bar"]

各部分规则说明 #

• .content_left > p.foo：匹配content_left容器的直接子元素中，携带foo类的p标签，对应第一个标记元素
• .content_mid > p:nth-child(2)：匹配content_mid容器的直接子元素中，排序为第2位的p标签，对应第二个标记元素
• .content_right > p[data-type="bar"]：匹配content_right容器的直接子元素中，data-type属性值为bar的p标签，对应第三个标记元素

如果你的DOM结构存在其他公共特征，也可以调整选择器逻辑，比如三个元素都属于各容器的第N个子元素的话，也可以改用:nth-child批量匹配，不需要拆分多个选择器。

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