特异性计算中的伪类和伪元素的CSS差异？

我学会了如何根据http://reference.sitepoint.com/css/specificity 计算css特异性。但是，根据这个参考，我不明白伪类（来自c）和伪元素（来自d）之间的区别是什么？特异性计算中的伪类和伪元素的CSS差异？

例如，

input[type="text"]:hover

悬停是伪类（从c）或伪元素（来自d）？

与input[type="text"].error相比，哪一个具有更高的特异性？

来源

2014-09-03 Matilda Yi Pan

伪元素是由浏览器生成的，它的元素的不同状态是'：hover'，'：checked'，'：focus'，你可以在用户交互中关联这个元素。第二件事'.error'是一个类，它可以用于一些不同元素上的一般CSS。我们把一些验证后的类（用于表单输入）放在JS中以通知用户 – kevpoccs 2014-09-03 07:17:06

对不起，我需要澄清一下自己。此时，我正在讨论css选择器，所以我正在编写css input [type =“text”]：hover {}，并输入[type =“text”]。error {}。由于它们具有相同的效果，所以我想知道哪一个具有更高的特异性。如果它们具有相同的特征，那么我需要决定顺序。 – 2014-09-04 00:31:26

你提到了浏览器生成的伪元素，所以这里的“悬停”不是伪元素，而是伪类，对吧？你能否给我一个伪元素的例子。谢谢。 – 2014-09-04 00:46:57

伪类（c）中具有10个

伪元件（d）的特异性具有1

两个

input[type="text"]:hover和

input[type="text"].error

特异性具有的特异性21

input（元件 - 'd'）= 1

[type="text"]（属性 - 'C'）= 10

:hover（伪类 - 'C'）= 10

.error（类 - 'C'）= 10

也有在线特异性计算器可用，如this one。

来源

2014-09-03 07:26:48 Danield

所引用的页面与CSS规范相同，如CSS3选择器，部分9. Calculating a selector's specificity，尽管不太详细和非权威性。关键在于，在特殊性中，伪类选择器被视为类选择器和伪元素选择器，如类型选择器（标记名称）。这意味着伪类选择器比伪元素选择器更具体。这背后的想法是，类（和伪类）以更具体的方式引用元素，比如“凯迪拉克”（一种汽车，可以这么说）比“汽车”更具体（一种事物，所以说）。

关于:hover，关键是它是如何在CSS规范中指定的。恰巧它是一个伪类选择器。这很自然，因为它指的是处于特定状态的元素，所以它可以被定义为“动态类”。

因此，input[type="text"]:hover和input[type="text"].error具有相同的特异性。

来源

2014-09-03 07:36:48

特异性计算中的伪类和伪元素的CSS差异？

回答

相关问题