好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS选择器、优先级与匹配原理_html/css_WEB-ITnose

polaris不是前台开发人员,然而作为一个Web开发者,掌握必要的前台技术也是很重要的。说实话,polaris对前台技术还是蛮感兴趣的,只是一直没有用心系统的学过,所以了解的知识有点杂。这篇文章是polaris通过网上的一些知识结合自己的问题做的一些总结,一来当作笔记,二来希望能够对初学者有点帮助。

今天在修改博客时,遇到了一个问题:给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用。通过Firebug查看,发现没有起作用的属性被覆盖了(呵呵,废话,要不然不会不起作用)。这个时候突然意识到了CSS选择器的优先级问题,之前一直没有注意这个,用起来很随意。这次遇到了,就将CSS选择器与优先级稍微作一个总结。

1 选择器种类

严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=""的方式,应该是CSS的一种引入方式,而不是选择器,因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起,所以就有了5种或6种选择器了。

1.1 三种基本的选择器类型

语法如下:

☆标签名选择器,如:p{},即直接使用HTML标签作为选择器。
☆类选择器,如.polaris{}。
☆ID选择器,如#polaris{}。

注意,ID选择器跟类选择器有很大的不同:一个页面内不能出现相同的ID;再就是ID也是后台开发人员会经常用的,所以前端开发人员应该尽量少的使用。当然跟后台人员的工作配合十分娴熟之后,这些都不会成为限制。

1.2 扩展选择器

语法如下;

☆后代选择器,如.polaris span img{},后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。
☆群组选择器,如div,span,img{},群组选择器实际上是对CSS的一种简化写法,只不过把有相同定义的不同选择器放在一起,省了很多代码。

2 选择器的优先级别

了解了各种选择器后,还有一个重要的知识点就是CSS选择器的优先级。这也就是为什么polaris会遇到文章开头的问题。

举个简单的例子:
HTML文档里存在下面的标签嵌套

beijixing polaris

查看更多关于CSS选择器、优先级与匹配原理_html/css_WEB-ITnose的详细内容...

  阅读:27次