芒果记账反思:CSS最佳实践——deep语法

html-css09

芒果记账反思:CSS最佳实践——deep语法,第1张

加了scoped,对其它组件不生效,只对本组件元素有效。如果不加scoped呢?不好,会影响其他组件的样式。那么,有什么好的方法吗?答案就是使用deep语法。

我们通过 ::v-deep 操作符就使Types组件内的 li 添加了样式

我们传入一个初始值给 Types 子组件,让其记录选中的 li 标签显示我们自定义的样式。

这只是有两个li的情况,如果里面有很多个li呢?所以我们需要精确选中。

封装成一个函数,返回一个对象,还可以接受参数,方便遍历。

要让div顶端对其,那么就必须根据HTML的布局和css样式的对其方式决定了:

1.浮动(float),这种情况下默认横向是left,纵向是top方向,所以默认就满足顶端对其;

2.定位(position),这种情况下只要设置要top的值就可以了;

3.display:inline-block;这种情况下,一般不是顶端对其,必须在父级加上一条样式:vertical-align: top才能实现顶端对其。

Ps:这些都是基于整个div的情况下,而实际表现出来的效果。可能会受到margin、padding等样式的影响,所以最好是能够将这些因素根据自己的需求考虑进去