侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

使用CSS选择项目的最佳方式

2023-03-28 星期二 / 0 评论 / 0 点赞 / 66 阅读 / 1899 字

我已经阅读了所有关于CSS中选择器的最佳顺序,但我经常(一直)看到人们这样做…. nav ul li#email-me a { width: 120px; height: 43px;

... . . 我已经阅读了所有关于CSS中选择器的最佳顺序,但我经常(一直)看到人们这样做….

nav ul li#email-me a {   width: 120px;   height: 43px;   background: url(images/email_me.png) no-repeat top left;   display: block;}

根据我的阅读,我的理解是这对性能更好……

#email-me a {   width: 120px;   height: 43px;   background: url(images/email_me.png) no-repeat top left;   display: block;}

我错过了什么吗?第二种方法更好吗?如果是,为什么每个人都使用第一种方法?

.

解决方法

. 我经常使用第一种方法,因为

>如some other答案中所述,它更具体. ID不会自动使整个规则比任何其他规则更具体;你可以向ID中添加一个类型选择器 – 或者除了通用选择器*之外的任何东西 – 它会立即使用单独的ID选择器来强制执行规则.我并没有发现自己使用这种技术来增加选择器的特异性,就像我为组织做的那样,尽管……
>详细说明组织:这种规则通常与以nav ul开头的其他规则相关,并且它有助于使用一些已经存在的初始选择器对它们进行可视化分组.

例如:

nav ul {    /* Styles for the ul */}nav ul li {    /* Styles for the items */}nav ul li a {    /* Styles for the item links */}/*  * If the selector here were just #email-me a,it'd be impossible * to see,right away,how it's related to the above rules,without * studying the markup that it applies to,and so on. */nav ul li#email-me a {    /* Styles for the link in the #email-me item */}

第二种方法应该更快,因为在识别具有ID的祖先元素之后不需要执行额外的检查,但是我没有基准并且我不能打扰任何.

. . .. ...

广告 广告

评论区