前端学习_02.选择器再解

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Uncle_nly/article/details/78417199

选择器再解

类选择器命名

• a)以功能和模块
  i.以功能和模块作为前缀，简洁可读易于理解

  (1)布局g/grid
  (2)模块m/modu
  (3)组件u/unit
  (4)功能f/func
  

  ii.缺点：

  (1)class的重用性大大降低(class本来设计用来重复利用的)
  (2)几乎li、td、dd 等连续出现且样式相同或者相似的标签才体现重用性
  (3)某一些组件没有具体的功能或模块，就无从命名或不贴切

• b)以简单和抽象
  i.增加了类的重用性，提高了开发效率。

  (1)一个组件可以用多个类 
  (2)一个类可以用在多个组件上
  (3)一个组件可以追加class来实现差异化
  (4)类的职责单一，弹性更强
  (5)多个类灵活组合可以减少类命名的混乱

  ii.缺点:

  (1)需要很多class组合
  (2)修改样式要改网页文件，如果是后端渲染网页的，需要修改后端文件
  (3)适合静态渲染，不适合频繁修改调整更新

继承性 

• a)定义:
  i.有些样式属性，在给指定标签设置的时候，同时也给后代设置了，此性质就是继承性

• b)继承性
  i.继承到样式的标签和定义样式的标签必须是从属关系（后代标签关系）
  ii.对文本样式设置的基本属性才能被继承（颜色color\样式text\字体font\行属性line）
  iii.所有关于对于盒子模型（div、span等）的属性设置（border、定位）都不能继承。
  iv.其中标签有默认的样式，覆盖了继承效果，效果上表现不出继承效果，需要单独再设置样式。

  

层叠性

• a) 定义:
  i.样式是可以覆盖的

• c)层叠性
  i.层叠性指的是样式的优先级：先按照权重，再按照定义的先后顺序，

  (1)其中标签选择器，类选择器，ID选择器的权值依次递增

  ii.避免使用多层标签选择器，可以用类选择器替换，标签选择器的权值最低，性能上比较弱，并且表意不明确。