当前位置：文江博客话题详情

计算选择器的特异性（CSS）

发布于 2024-08-15 19:07:36 字数 194 浏览 5 评论 0原文

我知道，为了计算选择器的特异性，我们使用三个数字，其中左侧的第一个数字是 ID 的数量，第二个数字表示类、伪类和属性的数量，第三个数字表示元素的数量。

我意识到以下数字被夸大了……ID 比类更具体，类比元素更具体，但是特异性为 1.0.0 的选择器（因此具有一个 ID 的选择器）会赢得特异性为 0.222.0 的选择器（具有 222 个类/伪类的选择器）？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

分分钟 2024-08-22 19:07:36

是的。

测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<style type="text/css">
#ID {color:red}
.C1.C2.C3 ... .C220.C221.C222 {color:green}
</style>
</head>
<body>
<div id="ID" class="C1 C2 C3 ... C220 C221 C222">This is a test.</div>
</body>
</html>

在最新的 Firefox、Chrome、IE 和 Opera 浏览器中文本为红色。

Yep.

Test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<style type="text/css">
#ID {color:red}
.C1.C2.C3 ... .C220.C221.C222 {color:green}
</style>
</head>
<body>
<div id="ID" class="C1 C2 C3 ... C220 C221 C222">This is a test.</div>
</body>
</html>

The text is red in recent Firefox, Chrome, IE, and Opera browsers.

回复收藏 0 原文

~没有更多了~