匹配每个可能包含文本的元素的 CSS 选择器？答案

【问题标题】：CSS selector that match every elements which may contains text?匹配每个可能包含文本的元素的 CSS 选择器？
【发布时间】：2014-01-29 23:45:55
【问题描述】：

有没有办法选择可能包含文本的元素？

类似这样的：

*:text {
   font-size: 12px;
}

我想将它用于我的reset.css，但我找不到方法，所以现在我使用以下代码：

* {
   font-size: 12px;
}

此解决方案适用于所有基于文本的元素（例如 STRONG、P、A 等），但它也将此样式应用于 IMG、OBJECT 等非文本元素。

所以我想知道是否有任何其他解决方案可以为所有基于文本的元素设置 CSS 属性，但仅此而已。

【问题讨论】：

有趣的问题。但是，您这样做的目的是什么？仅使用 *、html 或 body 选择器不会满足您的需要吗？
您可以在* {font-size: 12px;} img, object, etc. {font-size: something else;} 之后的其他元素上设置字体大小，或者专门针对包含文本的元素：p, strong, etc {font-size: 12px;} 而不是使用通用选择器
你想完成什么？大多数情况下，继承会为您完成这项工作。所以只需为body 设置一个font-size。如果您真的希望每个文本元素都具有特定的 font-size（还有 h1、h2 等），则必须在选择器中指定它们。
我会说html, body { font-size: 12px; } 是你最好的选择。这为您使用默认字体大小的任何元素提供了，而不必将其分配给每个元素。
认为您可能会在这里找到您想要的东西。 Apply CSS Repeatedly to Specific Words

标签： css css-selectors

【解决方案1】：

您不能根据元素是否包含文本的事实来定位元素，或者是否使用 css 选择器。另一方面，您可以查看为文本设置所需的全局字体大小或样式的最佳方法。

用你已经拥有的，

* {
   font-size: 12px;
}

这是将样式分配给 dom 中的所有内容。您可能没有想到，但它正在将其应用于您的头部、身体、html 和页面上的任何标签。有几个选项可以解决这个问题，我会从最好到最差列出它们。

html, body { /* this allows the children to inherit this style */
   font-size: 12px;
}

body * { /* assigns this style to every tag inside of your body tag */
    font-size: 12px;
}

p, span, a, etc { /* you decided what tags would most likely contain text to apply that style */
    font-size: 12px;
}

* { /* the worst option, applying that style to every tag */
    font-size: 12px;
}

【讨论】：

【解决方案2】：

如果您只想设置 img、object 等元素的样式，那么最简单的解决方案是直接在您的 CSS 中引用这些元素。

值得一提的是:empty 选择器（伪类）。这不完全是您想要的，但它选择没有子元素的元素，包括文本节点。所以它当然会覆盖img，但也包括一个空的（原文如此！）p。旧版浏览器可能不支持它。

【讨论】：

【解决方案3】：

我认为没有特定的方法可以使用伪选择器定位基于文本的元素，但这是了解更多关于伪类的好位置： http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

这是一篇关于重置的精彩文章： http://www.css-reset.com/

还有一个用于创建 CSS 重置的绝佳资源： http://www.cssreset.com/

【讨论】：