tyb*_*103 86 css css-selectors pseudo-class pseudo-element
像a:link或div::after......
有关差异的信息似乎很少.
Zet*_*eta 77
在CSS 3选择建议是关于双方很清楚,但我会尽量尝试显示的差异.
引入伪类概念以允许基于位于文档树之外的信息或者不能使用其他简单选择器表达的信息进行选择.
伪类总是由"冒号"(
:)后跟伪类的名称,并且可选地由括号之间的值组成.在选择器中包含的所有简单选择器序列中允许伪类.在前导类型选择器或通用选择器(可能省略)之后,允许在简单选择器序列中的任何位置使用伪类.伪类名称不区分大小写.一些伪类是互斥的,而其他伪类可以同时应用于同一个元素.在用户与文档交互时元素可以获取或丢失伪类的意义上,伪类可以是动态的.
伪类的重要性质在第一句中说明:"伪类概念[...] 许可选择 ".它使样式表的作者能够根据"位于文档树之外"的信息在元素之间进行区分,例如链接的当前状态(:active,:visited).这些不会保存在DOM中的任何位置,并且不存在用于访问这些选项的DOM接口.
另一方面,:target可以通过DOM操作访问(您可以使用window.location.hash以便使用JavaScript查找对象),但是 "无法使用其他简单的选择器来表达".
所以基本上,伪类会将所选元素集合精简为一系列简单选择器中的任何其他简单选择器.请注意,将同时评估一系列简单选择器中的所有简单选择器.有关伪类的完整列表,请检查CSS3选择器建议.
下面的示例将为所有偶数行(灰色(#ccc))着色,所有不均匀的行不能被5个白色和所有其他行品红色分割.
table tr:nth-child(2n) td{
background-color: #ccc;
}
table tr:nth-child(2n+1) td{
background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
background-color: #f0f;
}
伪元素创建关于文档树的抽象,超出文档语言指定的抽象.例如,文档语言不提供访问元素内容的第一个字母或第一行的机制.伪元素允许作者参考这个否则无法访问的信息.伪元素还可以为作者提供引用源文档中不存在的内容的方式(例如,
::before和::after伪元素提供对生成的内容的访问).伪元素由两个冒号(
::)后跟伪元素的名称组成.本
::说明书引入了这种表示法,以便在伪类和伪元素之间建立区别.为了与现有样式表兼容,用户代理还必须接受CSS级别1和2中引入的伪元素的先前单冒号表示法(即:first-line,:first-letter,:before和:after).对于本规范中引入的新伪元素,不允许这种兼容性.每个选择器只能出现一个伪元素,如果存在,它必须出现在代表选择器主体的简单选择器序列之后.
注意:此规范的未来版本可能允许每个选择器使用多个伪元素.
这里最重要的部分是"伪元素允许作者引用[...]其他无法访问的信息 ",并且它们"也可以为作者提供一种方式来引用源文档中不存在的内容(例如,::before和::after伪元素可以访问生成的内容. " 最大的区别在于它们实际上创建了一个新的虚拟元素,可以在其上应用规则甚至伪类选择器.它们不过滤元素,它们基本上过滤内容(::first-line,::first-letter)并将其包装在虚拟容器中,作者可以根据自己的需要设置样式(好吧,差不多).
例如,::first-line伪元素不能用JavaScript重建,因为它在很大程度上取决于当前使用的字体,字体大小,元素宽度,浮动元素(可能是一天中的时间).嗯,这并不完全正确:人们仍然可以计算所有这些值并提取第一行,但这样做是一项非常繁琐的活动.
我猜最大的区别是"每个选择器只能出现一个伪元素".该说明可能会有所变化,但截至2012年,我不相信我们将来会看到任何不同的行为(它仍然在CSS4中).
以下示例将使用伪类:lang和伪元素为给定页面上的每个引号添加语言标记::after:
q:lang(de)::after{
content: " (German) ";
}
q:lang(en)::after{
content: " (English) ";
}
q:lang(fr)::after{
content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
content: " (Unrecognized language) ";
}
伪类在选择器序列中充当简单选择器,从而在非表示特征上对元素进行分类,伪元素创建新的虚拟元素.
一个简单的选择器是一个类型选择器或通用选择器,后面紧跟零个或多个属性选择器,ID选择器或伪类,任何顺序.如果所有组件都匹配,则简单选择器匹配.
SLa*_*aks 40
伪类过滤现有元素.
a:link意味着所有<a>的:link.
伪元素是一个新的假元素.
div::after表示<div>s 之后的非现有元素.
::selection是伪元素的另一个例子.
它并不意味着所有被选中的元素; 它表示所选内容的范围,可以跨越多个元素的一部分.
mot*_*533 10
从Sitepoint文档:
一个伪类是类似于HTML的一类,但它不是在标记明确指定.一些伪类是动态的 - 它们是用户与文档交互的结果.- http://reference.sitepoint.com/css/pseudoclasses.这些就像是
:hover, :active, :visited.伪元素匹配文档树中不明确存在的虚拟元素.伪元素可以是动态的,因为它们表示的虚拟元素可以改变,例如,当浏览器窗口的宽度改变时.它们还可以表示CSS规则生成的内容.- http://reference.sitepoint.com/css/pseudoelements.这些就像是
before, :after, :first-letter.
概念性答案:
伪元素是指作为文档一部分的内容,但您还不知道它.例如第一个字母.在你只有文字之前.现在你有一个可以定位的第一个字母.这是一个新概念,但始终是文档的一部分.这也包括::before:虽然那里没有实际的内容,但在其他东西之前的东西的概念总是在那里 - 现在你正在指定它.
伪类是DOM中某些东西的状态.就像类是与元素关联的标记一样,伪类是由浏览器或DOM或其他任何东西关联的类,通常作为对状态变化的响应.当用户访问链接时 - 该链接可以处于"已访问"状态.您可以想象浏览器将"已访问"类应用于Anchor元素.:visited那么你将如何选择那个伪类.
下面是简单的答案：
当我们需要基于元素的状态应用CSS时，我们使用伪类。如：
:hover）的悬停:focus）上时应用CSS 。等等当我们需要将css应用于元素的特定部分或新插入的content时，我们使用伪元素。如：
::first-letter）::before，::after）的内容之前或之后插入内容以下是这两个示例：
<html>
<head>
<style>
p::first-letter { /* pseudo-element */
color: #ff0000;
}
a:hover { /* pseudo-class */
color: red;
}
</style>
</head>
<body>
<a href="#" >This is a link</a>
<p>This is a paragraph.</p>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
25605 次 |
| 最近记录： |