如何在CSS中仅选择p元素而不选中span元素？

先看你的HTML结构：

<div class="item-content-text">
  <p>
     <span>Jacob Thompson</span> has joined your group Chess Club
  </p>
</div>

你的两次尝试分析 #

• 第一次尝试：.item-content-text p:not(span) 逻辑不对，:not(span)是用来筛选「不是span的p元素」，但p本身就不是span，所以这个选择器和直接写.item-content-text p完全没区别，根本没法区分p内部的span和其他文本内容。

• 第二次尝试：这个写法本身是有效的，但要注意两点：

  • .item-content-text p 会给整个p元素设置样式，包括它里面的span（除非span的样式覆盖了p的设置）
  • .item-content-text span 可以单独给span设置样式，用来和p里的其他文本区分开

更精准的处理方案 #

如果你的需求是给p里的普通文本（不含span的部分）单独设置样式，或者完全区分p元素和span元素的样式，可以用以下方法：

方法1：继承+样式覆盖 #

先给p设置基础样式，再给span设置差异化样式来覆盖：

.item-content-text p {
  color: #333; /* 普通文本的样式 */
}

.item-content-text span {
  color: #0066cc; /* span的专属样式，和普通文本区分 */
  font-weight: bold;
}

方法2：精准区分元素样式 #

要是想给p元素和span元素设置完全不同的容器样式（比如边框、背景），你第二次尝试的写法就足够，细化后示例如下：

.item-content-text p {
  border: 1px solid #eee;
  padding: 8px;
}

.item-content-text span {
  background-color: #f0f8ff;
  padding: 2px 4px;
}

注：CSS目前没有直接选中p内纯文本节点的选择器，通过上述覆盖方法就能间接实现区分效果。

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