CSS选择器基础知识汇总，入门小白也能轻松掌握！

发表日期：2019-04-09 17:05:23 文章编辑：常桉网络建站公司浏览次数：324

《CSS选择器基础知识汇总，入门小白也能轻松掌握！》由【深圳网站建设公司】于2019年4月9日整理发布！

css（样式层叠表）作为一种样式语言，不但可以让html表现的更完美，还可以让我们的工作更有趣，但同时也需要考虑它的优先级关系，很多入门小白都不知道怎么用，只要掌握常用选择器的特点和不同的用法，操作起来也是非常的方便。

css选择器

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

1. id选择器（#myid）

id选择器使用“#”进行标识，后面紧跟id名，也就是HTML元素的id属性值，id值是唯一的，只能对应于文档中某一个具体的元素。

2.类选择器（.myclassname）

类选择器使用“.”（英文点号）进行标识，后面紧跟类名。

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

用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

4.后代选择器（li a）

用来选择元素或元素组的后代，它的写法是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

5.通配符选择器（*）

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

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

伪类选择器用于向某些选择器添加特殊的效果。

一般而言，选择器越特殊，它的优先级越高，它指向的越准确，优先级也就相对的越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。

类选择器

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

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

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

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

通常：

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

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

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

选择器的种类虽然很多，但从使用的角度来看，只要摸清它的规律和法则，还是比较好理解的，当有了一些经验后，很容易看出一个选择器比起另一个选择器特殊性是高还是低，编写CSS时应该小心，如果没有必要，不要创建高特殊性的选择器。

以上内容原创整理编辑，转载请注明：深圳网站建设公司>>http://www.changanseo.com/indexnews/jz/1381.html

相关资讯