CSS选择器学习笔记

CSS提供了种类繁多的选择器，初学时会不理解为什么提供这么多类型的选择器，以至于第一次写页面时每次想给一个标签添加样式都给它写一个新的class。后来，发现这样子维护起来相当麻烦，而且有很多属性都是部分通用的，给每个class都添加重复的内容无疑是冗余低效的。

随着学习的深入，开始尝试使用一些进阶的选择器，如：子元素选择器、直接子元素选择器、伪类选择器等。主要是想尽可能使用少一些class，使HTML文档的易读性更高（此前模仿的一个页面，对比源码后发现其HTML可读性极高，因此印象深刻）。

于是在最近编写的一个页面中写了大量诸如.content > div > div:nth-child(1) > p { }这样的选择器。因为先前先写好了HTML的整体结构，然后按着顺序写CSS，所以一开始还没什么问题。问题出现在实现某个比较复杂的效果时。因为当时时间有限，我就打算跳过复杂那部分，先写后面的。结果回头写复杂那部分的时候，发现想实现目标效果的话，必须调整HTML文档结构。然后加上新的标签之后，一切都乱套了。因为先前使用了大量直接子元素选择器，文档结构改变之后，原本的“父子”可能就不再是父子了，原来的兄弟之间备份也有可能改变，于是就出现了牵一发而动全身的恶果，修改起来相当麻烦。

小结

以下是目前为止关于CSS选择器的使用的一些个人归纳总结，可能有错漏，欢迎指出

1. 如无必要，不得为id class选择器添加类型选择器进行限定。
   解释：会在性能和维护性上造成影响。
   示例
   /* good */
   #error,
   .danger-message {
   font-color: #c00;
   }

    /* bad */
    dialog#error,
    p.danger-message { 
        font-color: #c00;
    }
   

建议：选择器的嵌套层级硬不大于3级，位置靠后的限定条件应尽可能精确。（我之前就是没做到这点导致了大麻烦）

2. 尽量在靠后、具体的位置使用:nth-child(){ }选择器。
   解释：:nth-child(){ }选择器在方便的同时，极度依赖HTML文档结构，若在选择器中间使用:nth-child(){ }选择器，一旦文档结构发生改变（而且这很平常），将会产生严重的连锁效应。
   示例：
   /* good */
   .danger-message > div >p:nth-child(1) {
   font-color: #c00;
   }

    /* bad */
    .danger-message > div:nth-child(2) > p:nth-child(1) { 
        font-color: #c00;
    }
   

3. 尽量不使用id选择器设置样式
   解释：重用性大大降低。id更多地使用在定位和js上。

4. 当多个子标签样式相同时，可为他们的父标签设置class，使代码更简洁。
   示例：
   HTML：

     /* good */
    
   
        
   some content
        
   some content
        
   some content
        
   some content
    
   
    
   
        
   some content
        
   some content
        
   some content
        
   some content
    
   

以上就是最近在写CSS时对CSS选择器使用的一些总结，难免会有不足的地方，继续学习继续进步吧。