【问题标题】:How can I prevent universal selector rules from affecting span? [duplicate]如何防止通用选择器规则影响跨度? [复制]
【发布时间】:2019-04-29 16:54:25
【问题描述】:

我有这个规则:

* {background-color:#ddd;font-family: Arial,Helvetica,sans-serif;font-size:13pt}

不幸的是,它将字体大小强加在 元素上。我希望跨度继续没有默认规则,以便我可以使用它来更改文本颜色等。

我的 * 规则具有最低优先级,这很好,因为 * 用于设置默认值,我们希望轻松覆盖它。但是,它适用于 span 规则,这会使 span 错误地包含其样式。 Span 应该用于应用特定样式,而不是默认样式。

【问题讨论】:

  • 当涉及到至少两个选择器时,我们会谈论特异性,如果您只应用一个规则,那么无论具体性如何,它都会在逻辑上适用。
  • 我清楚地解释了有两条规则,一条用于*,一条用于span。
  • 这个问题不是重复的,因为我没有意识到从通用选择器中排除 span 甚至是可能的,并且因为它解决了 * 优先于所有其他规则的问题,这在我看来是 css 中的一个错误。
  • 这不是错误,* 是一个选择器,这意味着选择所有内容(包括跨度),如果您已经有一个 span 选择器,它将具有更高的特异性并且不会受到影响*(例如:jsfiddle.net/3ajnLy59),这是重复的,因为您只是使用了 not() 功能,这是众所周知的,与 * 或任何其他选择器没有什么特别之处。所以如果你问了这个问题而你没有回答它,我会用相同的重复关闭,因为答案很清楚“你需要考虑 not() 选择器从你的选择器中排除某些东西”
  • 我刚刚试验了一下,发现你说的没错:span规则优先于*规则。但是,这意味着我必须手动修补跨度规则,以便为每个大小不正确的特定上下文重新建立其正确大小。使用 :not 是完美的解决方案,但从网络搜索这种情况来看并不明显。我认为在 StackOverflow 上发帖会建议其他发现 span 被 * 更改的人如何纠正这个特定问题。我现在将编辑我的问题和答案,以使这一点更清楚。

标签: css css-selectors


【解决方案1】:

使用 :not 伪选择器排除 span,如下:

:not(span) {background-color:#ddd;font-family: Arial,Helvetica,sans-serif;font-size:13pt}

【讨论】:

  • 这对你没有多大帮助,因为字体属性是继承的,所以它会被应用到 span 元素
  • 它很有帮助,因为它运行良好。它为所有元素提供所需的背景颜色和其他默认值,而不会导致跨度干扰字体大小。请务必仔细阅读问题。如果您被排除在规则之外,您将无法继承某些东西。
  • 检查这个:jsfiddle.net/ov3480aq/4,别担心,我仔细阅读了问题,但请务必自己验证。字体属性是继承的。正如您在代码中看到的那样,我排除了 span 并且它获得了相同的字体大小。为什么?因为它继承了值。
  • 你的小提琴不是我正在讨论的情况。将其更改为: ----

    test some text

    ---- * { font-size:60px; } h2 {font-size:12px} ----
  • 看看 * 字体大小如何覆盖跨度!现在清楚了吗?
猜你喜欢
  • 2018-04-27
  • 2017-10-11
  • 2011-02-26
  • 2011-10-03
  • 2023-02-05
  • 2012-06-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多