《CSS选择器基础知识汇总，入门小白也能轻松掌握！》由【肇庆网站建设公司】于2019年4月9日整理发布！j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

css（样式层叠表）作为一种样式语言，不但可以让html表现的更完美，还可以让我们的工作更有趣，但同时也需要考虑它的优先级关系，很多入门小白都不知道怎么用，只要掌握常用选择器的特点和不同的用法，操作起来也是非常的方便。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

CSS选择器效率从高到低的排序如下：j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

1. id选择器（#myid）j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

id选择器使用“#”进行标识，后面紧跟id名，也就是HTML元素的id属性值，id值是的，只能对应于文档中某一个具体的元素。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

2.类选择器（.myclassname）j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

类选择器使用“.”（英文点号）进行标识，后面紧跟类名。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

3.标签选择器（div,h1,p）j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

4.后代选择器（li a）j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

用来选择元素或元素组的后代，它的写法是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

5.通配符选择器（*）j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

通配符 选择器用“*”号表示，他是所有选择器中作用范围广的，能匹配页面中所有的元素。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

6.伪类选择器（a:hover, li:nth-child）j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

伪类选择器用于向某些选择器添加特殊的效果。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

一般而言，选择器越特殊，它的优先级越高，它指向的越准确，优先级也就相对的越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

什么情况下使用什么选择器，用不同选择器的原则是：j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

1、准确的选到要控制的标签；j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

2、使用合理优先级的选择器；j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

3、HTML和CSS代码尽量简洁美观。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

通常：j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

①常用的选择器是类选择器。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

②li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

③极少的情况下会用ID选择器，当然很多前端开发人员喜欢header，footer，banner，conntent设置成ID选择器的，因为相同的样式在一个页面里不可能有第二次。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

选择器的种类虽然很多，但从使用的角度来看，只要摸清它的规律和法则，还是比较好理解的，当有了一些经验后，很容易看出一个选择器比起另一个选择器特殊性是高还是低，编写CSS时应该小心，如果没有必要，不要创建高特殊性的选择器。j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

以上内容原创整理编辑，转载请注明：肇庆网站建设公司>>/indexnews/jz/1381.htmlj9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司

j9E肇庆网站建设_营销型网站建设_网页设计制作及小程序开发-小知鸟网络建网站公司