嘿，这两个都是CSS开发里挺常见的需求，我来给你一步步拆解解答：

1. 如何仅为父元素应用CSS样式，且不会对其子元素的样式产生影响？ #

CSS里的属性分继承属性和非继承属性，处理方式不一样：

• 对于非继承属性（比如border、padding、margin、background、width这些）：直接给父元素加样式就完事了！这些属性本来就不会被子元素继承，子元素完全不受影响。举个例子：

.parent {
  border: 2px solid #ff4444;
  padding: 15px;
  background: #f5f5f5;
}

父元素会有红色边框、灰色背景和内边距，子元素该咋样咋样，一点不受干扰。

• 对于继承属性（比如color、font-size、line-height这些）：这类属性默认会被子元素继承，如果你想让父元素用这个样式，但子元素不跟着变，有两种靠谱的办法：
  1. 显式重置子元素样式：给子元素设置你想要的样式（比如默认值或者自定义值），覆盖继承来的属性。比如：

  .parent {
    color: #ff4444; /* 父元素文字变红 */
  }
  .parent > * {
    color: initial; /* 子元素文字恢复浏览器默认颜色 */
    /* 也可以写具体值，比如 color: #333; */
  }
  

  2. 使用重置属性批量处理：如果想一次性重置子元素的所有继承样式，可以用all: revert或者all: unset，不过要注意兼容性，而且会重置所有样式，得谨慎用：

  .parent {
    font-size: 20px;
  }
  .parent > * {
    all: revert; /* 让子元素回到浏览器默认样式，不继承父元素的font-size */
  }
  

2. 隐藏h1中的‘Category:’文本（不改动内容） #

针对你给出的代码，我推荐几个不用改HTML的方案，按易用性排序：

方案1：字体大小清零法（最简便） #

原理是把父元素的字体大小设为0，让里面的纯文本“消失”，再单独给span恢复原来的字体大小：

.f_p {
  font-size: 0; /* 父元素内的纯文本因为字体为0，直接看不见 */
}
.f_p span {
  font-size: 50px; /* 对应你原来的f_size_50类的大小，恢复span的字体 */
  /* 其他样式比如font-weight、color会自动继承父元素的，不用额外设置 */
}

这个方法完全不需要计算宽度，只要知道span应该用的字体大小就行，非常省心。

方案2：伪元素覆盖法（适合父元素有固定背景色的情况） #

用一个和父元素背景色一样的伪元素，把‘Category:’盖住，同时让span在层级上靠前：

.f_p {
  position: relative; /* 给伪元素定位做基准 */
}
.f_p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120px; /* 调整宽度刚好盖住‘Category:’，根据实际字体大小微调 */
  height: 100%;
  background-color: #fff; /* 必须和父元素的背景色一致 */
}
.f_p span {
  position: relative;
  z-index: 1; /* 让span在伪元素上面，不被盖住 */
}

这个方法适合不能修改字体大小的场景，但需要精确计算覆盖的宽度。

方案3：文本缩进法（适合固定长度的文本） #

通过负的文本缩进把‘Category:’移出可视区域，再用内边距让span显示出来：

.f_p {
  overflow: hidden; /* 隐藏超出的文本 */
  text-indent: -120px; /* 缩进值等于‘Category:’的宽度 */
  padding-left: 120px; /* 给span留出显示空间 */
}

这个方法同样需要计算文本宽度，适合内容固定不变的情况。

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