CSS选择器

 

       在这里主要总结了三个较为常用的选择器，熟练掌握这些选择器的使用，能够灵活地处理网页，作为初学者更要

理清他们的关系。

 

一、选择器类型

ID选择器

     id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

 

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

       当地标记文档后，才能使用这些选择器

 

HTML标签选择器

决定哪些标签采用相应的CSS样式

 

二、联系与区别

优先级

     ID选择器>类选择器>HTML标签选择器

 

区别

      ID 选择器：“  # ”  + 自定义类名

       类选择器：" . " + 自定义类名

      HTML标签就是容器，可以存放代码，文字等。id选择器和类选择器可以嵌入到HTML标签中，也可以包含HTML

标签。

 

联系

 

文件角度

    都是在页式文件中定义，在样式文件中完善。

 

 

样式属性角度

      基本上使用同一的属性，例如文本属性，背景属性，方框属性等

 

 

 

三、应用

 

优先级比较

    页式文件中代码

 

    样式文件中代码

 

       从上图中可以看出，使用id选择器和使用类选择器分别定义了不同颜色，那么由于id选择器优先级较高，所以最

终会按照#spacial{}中定义的样式显示。

 

class类选择器中的优先级

    在class类名中，用空格将类名menu 和类名niu 间隔开

 

样式选择取决于类menu 和类niu在样式文件中排列顺序，排在最前面的优先级高。

 

HTML标签使用

    例如：与类成父子关系的标签

 

   定义span标签中的文字样式，可以在样式文件中这样写，类和标签名用空格隔开。（父子关系）

 

四、小结

         熟练操作这些常见的标签才能更好的开发网页，才能灵活自如地处理页面。在使用选择器的时候，还有很多处

理技巧，这些技巧的应用在一定程度上优化了代码结构，代码的复用度高。我们需要多多积累一些这块儿的知识，并

能熟练应用。