CSS .not（selector）无法处理span标记

Question

我有一个标题，其中包含一个带有日期的span标记和一些文本。文字应该是粗体，日期应保持正常。

在CSS文件中，我使用:not(cls)，但不知何故日期也被格式化了。

.parent {
  display: flex;
}

.parent:not(.date) {
  font-weight: bold;
}

.date {
  padding-right: 20px;
}

<div class="parent">
  <span class="date">the date</span> title goes here
</div>

这里有什么问题？

Answer 1

.parent:not(.date)表示“属于父类类的成员的元素，并且不是类数据”的成员。

由于您没有class="parent date"的元素，这使得:not()部分毫无意义。

选择器永远不会应用于范围（因为范围没有class="parent"）。

查看浏览器中内置的DOM检查器中的元素。

span元素上的font-weight属性的默认值为inherit，因此它将获得父元素所具有的任何内容。

如果您不希望它是粗体，那么您需要明确说出来。

.parent {
  display: flex;
}

.parent {
  font-weight: bold;
}

.date {
  font-weight: normal;
  padding-right: 20px;
}

<div class="parent">
  <span class="date">the date</span> title goes here
</div>

Answer 2

也可以这样做吗？

.parent {
  display: flex;
  font-weight: bold;
}

.date {
  padding-right: 20px;
  font-weight: normal;
}