怎样高效的使用CSS选择符

首先看一小段 CSS 代码:#menus > li { font-size: 14px; }可能大家都会猜想浏览器会使从左到右匹配上面的规则,我们会想象浏览器先找到唯一的 id 为 menus 的元素,然后把样式应用到其直系子元素 li 元素上。这看起来好像还挺高效的。但是,事实上,CSS 选择符是从右到左进行匹配的。所以,...
怎样高效的使用CSS选择符
这次给大家带来怎样高效的使用CSS选择符,高效使用CSS选择符的注意事项有哪些,下面就是实战案例,一起来看一下。最初写CSS的时候,觉得很简单,写得天马行空。后来慢慢的发现,没有规则的瞎写,虽然也能实现效果,但是在实际开发中可能会多做无用功或是重复做功,并且CSS并不高效。于是后期开发时就特意按照一定的规则,尽可能的写出高效的,可复用的CSS,总结一下,主要是是以下几个方面。首先看一小段 CSS 代码:#menus > li { font-size: 14px; }可能大家都会猜想浏览器会使从左到右匹配上面的规则,我们会想象浏览器先找到唯一的 id 为 menus 的元素,然后把样式应用到其直系子元素 li 元素上。这看起来好像还挺高效的。但是,事实上,CSS 选择符是从右到左进行匹配的。所以,上面的这条规则并不高效,浏览器必需遍历页面上的每个 li 元素并确定其父元素的 id 是否为 menus。样式系统从最右边的选择符开始向左匹配规则。只有当前选择符的左边还有其他的选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。编写高效的CSS选择符有以下常用规则:一、避免使用通配规则除了传统意义上的通配选择符之外,我们把相邻兄弟选择符、子选择符、后代选择符合属性选择符都归纳到通配规则分类下,推荐仅使用 ID、类和标签选择符。二、不要限定 ID 选择符在页面中一个指定的ID只能对应一个元素,所以没有必要添加额外的限定符。例如,p#header是没有必要的,应该简化为#header。三、不要限定类选择符不要用具体的标签限定类选择符,而是根据实际情况对类名进行扩展。例如,把li.chapter改成.li-chapter,或是.list-chapter更好。四、让规则越具体越好不要试图编写像 ol li a 这样的长选择符,最好是创建一个像.list-anchor一样的类,并把它添加到适当的元素上。五、避免使用后代选择符通常处理后代选择符的开销时最高的,而使用子选择符也可以得到想要的结果,并且更加高效。六、避免使用标签—子选择符如果有像#menus > li > a这样的基于标签的子选择符,那么应该使用一个类来关联每个标签元素,例如.menus-item。七、质疑子选择符的所有用途检查所有使用子选择符的地方,然后尽可能用具体的类取代它们。八、依靠继承了解哪些属性可以通过继承而来,然后避免对这些属性重复指定规则。例如,对列表元素而不是每个列表元素指定list-style-image。请参考继承属性的列表来了解每个元素的可继承的属性。相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!推荐阅读:CSS3做出条纹大背景css3做出半圆弧线2023-07-27
mengvlog 阅读 9 次 更新于 2025-07-20 00:00:04 我来答关注问题0
  • 编写高效的CSS选择符有以下常用规则:一、避免使用通配规则除了传统意义上的通配选择符之外,我们把相邻兄弟选择符、子选择符、后代选择符合属性选择符都归纳到通配规则分类下,推荐仅使用 ID、类和标签选择符。二、不要限定 ID 选择符在页面中一个指定的ID只能对应一个元素,所以没有必要添加额外的限定符...

  •  阿暄生活 CSS的id选择器和class选择器

    1. 定义与用法 id选择器:通过HTML元素的id属性来选择元素。id属性在页面中应该是唯一的,即每个元素的id值都是独一无二的。在CSS中,id选择器以#符号开头,后跟id值。class选择器:通过HTML元素的class属性来选择元素。class属性可以应用于多个元素,即同一个class值可以被多个元素共享。在CSS中,clas...

  • 如下:body {}div {}p {}span {}二、群组选择符对于XHMTL对象,可以对一组同时进行了相同的样式指派。使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构。使用时应该注意"逗号"是在半角模式下,并非中文全角模式。如下:h1,h2,h6,p,span{fo...

  •  wait33_ css包含各种选择符,如:id选择符、类选择符,请问怎么用,应该注意什么?谢谢!

    1)class是设置标签的类,用于指定元素属于何种样式的类。在CSS样式中以小写的“点”及“.”来命名,在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器。如: .css5{属性:属性值;} 选择器在html调用为“我是class例子 .baobao { color: lime; background: #ff80c0 } 使用...

  • CSS Selector 是一种在网页中定位元素的方法。以下是CSS Selector的主要内容:基本选择器:ID选择器:使用#符号,如#choose_car选择ID为choose_car的元素。类选择器:使用.符号,如.s_ipt_wr选择类名为s_ipt_wr的元素。后代选择器和平级关系选择器:后代选择器:使用空格分隔,如ul ol li em选择...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部