如何用CSS仅隐藏h1内“Showing posts from”指定文本

你之前编写的CSS规则直接作用在父级h1.page-header-title元素上，display: none属性会隐藏当前标签包裹的所有子元素、文本节点，自然会把后面的分类标识、分类名全部一起隐藏，没法实现只藏指定文本的需求。

你要隐藏的「Showing posts from」文本刚好被h1下第一个直接子<span>标签单独包裹，直接选中这个目标span设置隐藏规则即可，不会影响其他内容显示：

/* 仅选中h1下第一层的第一个span元素，也就是包裹目标文本的标签 */
h1.page-header-title > span:first-child {
    display: none;
}

• > 是CSS直接子元素选择器，只会匹配h1标签下第一层的子元素，不会误命中嵌套在更深层级的span
• :first-child 伪类会定位到父元素下排序第一的子元素，刚好对应包裹“Showing posts from”的span标签

补充提示：如果后续页面结构调整，你要隐藏的文本没有被独立标签包裹，纯CSS实现文本定向隐藏的兼容性和可维护性会很差，这种情况建议直接给目标文本套一个带专属class的标签，再通过class选择器设置隐藏规则，后续调整也更方便。

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