如何实现仅嵌套在xp-row类容器内的social-buttons类div隐藏

• 类选择器语法缺失：原代码中xp-first-row前没有加类选择器标识.，浏览器会将其识别为需要匹配的HTML标签名，完全无法命中页面上带该类名的div元素
• 选择器逻辑和DOM结构不匹配：原写的结构等价于“.xp-row内部嵌套xp-first-row标签，再找标签内的.social-buttons”，和需求里“同一个父元素同时携带xp-row、xp-first-row两个类名”的实际DOM结构完全错位
• CSS属性值无效：visibility属性没有none这个合法取值，该属性仅支持visible、hidden、collapse等值，错误值会直接导致规则被浏览器丢弃

根据实际隐藏效果的需求选择对应写法：

/* 隐藏元素，且元素不再占用页面布局空间 */
.xp-row.xp-first-row .social-buttons {
  display: none;
}

/* 隐藏元素，但元素仍然保留原本的布局占位 */
/*
.xp-row.xp-first-row .social-buttons {
  visibility: hidden;
}
*/

• 选择器.xp-row.xp-first-row是多类元素匹配的标准写法，语义为“同时带有xp-row和xp-first-row两个类名的元素”，两个类名之间没有空格
• 后续空格接.social-buttons，表示匹配上述特定父容器下所有层级的.social-buttons元素：只要.social-buttons被嵌套在这个特定父容器内，就会触发隐藏规则
• 独立存在、未被该特定父容器包裹的.social-buttons元素不会被选择器命中，将保持原本的正常显示状态

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