css 样式 局部 有效

html-css017

css 样式 局部 有效,第1张

float:漂浮属性允许网页制作者将文本环绕在一个元素的周围,这同html3.2

中img元素的align一样,但css1允许所有对象漂浮,而不像html3.2那样,仅仅允许图像和表格

这个属于css的优先级问题

* 页面中定义的样式,加1,0,0,0

* 每个ID选择符(如 #id),加0,1,0,0

* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0

* 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1

然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,

然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。

比如 .main .content a{} 就比 .main a{}的优先级高,会覆盖掉后面的

在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的组件,使得该css样式不影响到其他组件或本组件的子组件,也保护的本组件的样式不受其他组件影响。很好的实现了样式私有化的目的,这是一个非常好的机制。

所谓的局部css,就是通过vue-loader这个插件,在编译打包的时候将带有scoped属性的css打上一个tag,同时将template内的所有html都打上一个相同的tag,最后通过css的属性选择器定位,造就了所谓的局部css。

但是,在开发时我们有时需要对公共组价的样式进行修改,而如果公共组件添加了scoped属性,就会导致它的样式不易(不可)修改,这在项目开发中会造成一定影响,所以正确的做法应该是:

在项目中,使用的是 vue + Element UI 的开发模式,而在使用 Element UI 框架时,常常需要对其原本的样式进行调整,如果我们在使用时直接在组件的 style 对其进行修改而没有加上 scoped ,就会导致这个UI组件的样式被全局修改了,往后的使用自然是会受到影响的。或者是我先前使用改过这个 UI 组件,那么它有可能会对先前的样式进行覆盖,并且很难排查。所以,我们应该在每一个组件的 style 加上 scoped

使用 scope 同时也会导致一个问题,在使用第三方UI框架如element-ui时,由于使用了 scope 导致本css无法对子组件的样式进行修改。此时解决方案有两个

将会被编译成

这样实现了子组件样式的修改,同时也不会影响全局样式。。