- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我已经知道如何计算 CSS 的选择器特异性(规范中提到的 a/b/c/d)。但是,我无法确定如何为 :not()
伪类计算它。请参阅以下示例:
input:not([type="text"],[type="password"],.someClass) {...}
input:not(#someId[type="text"]) {...}
假设它们都适用于一个元素,这两个是否应该计算为(0011),因此它们应该按照出现的顺序排序?或者是否应该进一步单独计算 :not()
伪类中的选择器,这取决于哪个匹配,作为确定优先于另一个的第二步?
最佳答案
Assuming both of them apply to one element, should these two be calculated as (0011) and therefore they should be ordered according to order of appearance? Or should the selectors inside the
:not()
pseudo-class be further calculated separately depending on which one match as a second step to determine the one that have precedence over the other?
如果您正在实现 Selectors 3 , 根本不应该计算它们。如前所述,根据该规范,您的两个选择器都是无效的,因为它只定义 :not()
一次接受一个简单的选择器。
如果您将它们展开以验证它们(按照给定的说明/示例 here ),那么它们的特异性将计算如下:
/* 2 attributes, 1 class, 1 type -> specificity = 0-3-1 */
input:not([type="text"]):not([type="password"]):not(.someClass)
/*
* 1 ID, 1 type -> specificity = 1-0-1
* 1 attribute, 1 type -> specificity = 0-1-1
*/
input:not(#someId), input:not([type="text"])
因为 Selectors 3 says :
Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.
此外,针对您的评论:
True, according to specs, simple selectors only. But some browsers support multiple ones. Some of them don't, and some dropped them later. Also, you can write the same rule even with simple selectors like this instead:
input:not([type="text"]):not([type="password"]):not(.someClass)
which is better and work as well. Does this mean it should be calculated as 0031, then? How about those that support multiple ones, how do they calculate?
我所知道的唯一 浏览器在 :not()
中支持多个选择器是 Firefox 3.0,它这样做是因为一个错误。选择器 3 从不 允许 :not()
包含多个选择器——这仅在 Selectors 4 中引入,甚至还没有明确定义特异性计算1,所以即使您尝试实现选择器 4(我严重怀疑您是),您会被卡住。
我不清楚 Firefox 3.0 是如何通过其版本的 好的,所以我选择了 Firefox 3.0 beta 1、3.0.0、3.0.18 和 3.1 beta 1,但都没有完全重现此行为。好了。:not()
选择器实现特异性的,我没有它的副本来测试,但我认为可以安全地假设它不再重要,因为它从来都不是预期的行为。
1 请注意,当前的 2013 ED 和 2011 FPWD 都一致表示 :not()
的特异性等于它的特异性最具体的论点,但这在未来可能会改变。
关于css - 计算 :not() pseudo-class 的 CSS 选择器特异性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15879843/
我正在尝试在 delphi 下创建一个名为 TRange 的通用类。这个想法是,它可以是整数范围或单精度范围或 double 范围等... TRange 对象包含一些 T 类型的变量(maxValue
我对 Javascript 非常陌生,正在寻找一种方法让我的代码仅响应列表中单击的项目。 (完整的 JSFiddle 在这里: http://jsfiddle.net/5cjPF/ ,尽管由于某种原因
我遇到了一个问题,我无法获得使某些代码正常工作所需的特异性级别。我有一个 我想为其制作 的背景悬停在带有花哨的小滑入动画上时会发生变化。 我设法使用 linear-gradient 让它工作得很好用
我在使用一些自定义的 960.gs 类时遇到了一些困难。当我使用子容器时出现问题,子容器的列只是继承主容器列规则的宽度。 在我看来,内部单元格 (foo + bar) 应该是绿色的。这意味着他们应该获
我将第 3 方组件附加到 div 元素(容器)。此 div 元素位于 from 内,表单具有 cssform 类。我使用的主要 CSS 表包含定义: .cssform div { max-wi
我在一个 HTML 元素上有两个 CSS 类:.c-headline-1和 .c-hero__headline .在我的外部样式表中,我使用 .c-headline-1在内部样式表 ( ) 中,我使
我在这里对我的样式表感到非常困惑。我的工作表中有很多特定的链接样式,由于某种原因,当我使用 Chrome 开发工具或 Firebug 检查页面时,其中一个随机样式会被其他样式覆盖。在摆弄 !impor
我正在重新设计我的博客,考虑到响应式网页设计和“移动优先”方法 - 简而言之,我正在尝试使用最小宽度来避免任何类型的复制或 css.. 没有显示:无等.. 我的问题是,当我确实需要覆盖 CSS 值时,
我一直在阅读有关特异性的内容,坦率地说,我很惊讶我之前没有正确了解这一点,因为我亲眼目睹了如果 CSS 声明错误,特异性可能会带来的问题方式。 所以,我对这个主题做了一些研究,现在我了解了计算特异性的
我一直在阅读特异性,坦率地说,令我惊讶的是我之前没有正确地了解这一点,因为我亲眼目睹了如果 CSS 声明错误,特异性会带来的问题方式。 因此,我一直在对该主题进行一些研究,现在我了解了计算特异性的规则
我想使用以下内容来定位我的 div 中最后一个 ul 的最后一个链接 (a)。所以这就是我想到的: #menu ul:last-child li a { /*.....*/ } 我无法手
为什么这两个结果不等价?第一个显示绿色行,而第二个不显示。唯一不同的是html c 还有,nth-child选择器的特殊性是什么? Stripe Test
我正在制作响应式电子邮件模板,并希望申请 display: block !important至 2 元素,以便从 2 列布局变为 1 列布局。我正在使用以下选择器: td[class="mainArt
我在大学计算机科学系的 Web 开发课上,老师问类(class):“为什么类选择器规则应用在标签选择器规则之上(参见示例代码)?”。我回答说这是因为 CSS 的特殊性,我被告知我错了。他想要的答案是因
这对我来说是一个学习练习,所以在此先感谢您没有告诉我为什么我不想执行以下操作。我不想做,我想明白。 给定以下 CSS: input[type="file"]:focus, input[type="ra
我正在编写一堆 PHP 类,它们将用于创建 Wordpress 插件,但也可以在任何其他环境中使用。在自己测试我的脚本之后,一切似乎都很好,但是当我为它创建一个 WP 插件时,出现了我预见到的 CSS
我简单看了下CSS3 Selectors spec但找不到任何解决这个问题的方法。此外,我没想到当您移动 CSS 声明时结果会发生变化,但它确实发生了变化。任何帮助都会很棒。 div.green_co
假设我有以下 CSS: .InfoTable-main-table tbody tr td:before{ background: #222; color: #fff; c
因 CSS 存在特殊性问题而发疯。HTML。
http://jsfiddle.net/DkAqZ/9 HTML default black text default red link #inner gr
我是一名优秀的程序员,十分优秀!