css选择器知识点有哪些

这篇文章主要为大家展示了“css选择器知识点有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css选择器知识点有哪些”这篇文章吧。

十余年的潞城网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整潞城建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“潞城网站设计”,“潞城网站推广”以来，每个客户项目都认真落实执行。

选择器的种类可以分为三种：标签名选择器、类选择器，ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。

CSS选择器效率从高到低的排序如下：

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h2,p）

4.相邻选择器（h2+p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（*）

8.属性选择器（a[rel="external"]）

9.伪类选择器（a:hover, li:nth-child）

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

对于什么情况下使用什么选择器，用不同选择器的原则是：

1、准确的选到要控制的标签；

2、使用最合理优先级的选择器；

3、HTML和CSS代码尽量简洁美观。通常：

①最常用的选择器是类选择器。

②li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {}的方式选择。

③极少的情况下会用ID选择器，当然很多前端开发人员喜欢header，footer，banner，conntent设置成ID选择器的，因为相同的样式在一个页面里不可能有第二次。

我们的目标是高效，简介的css

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，其实浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如 DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：

先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

下面列出一些我们常见的写CSS犯一些低效错误：

1.尽量不要在ID选择器和class选择器前使用标签名

eg：

<div id="box">

<span class=“eg”>选择器举例</span>

</div>

<style>

div#box{...} /*一般写法*/

#box{...} /*更简便的写法*/

span .eg{...} /*一般写法*/

.eg{...} /*更简便的写法*/

</style>

注：但是当你的页面中定义了多个叫eg的类时，需要有层级的写法。

2.尽量少使用层级关系

一般写法：#divBox p .red{color:red;}

更好写法：.red{..}

3.使用class代替层级关系

一般写法：#divBox ul li a{display:block;}

更好写法：.block{display:block;}

以上是“css选择器知识点有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

分享名称：css选择器知识点有哪些
浏览地址：https://www.cdcxhl.com/article6/gcdpog.html

成都网站建设公司_创新互联，为您提供小程序开发、App开发、标签优化、网站收录、网站导航、自适应网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联