这是我参与「第四届青训营」笔记创作活动的第24天

z-index 不生效的原因

z-index属性仅作用在position属性上，属性值为(static, relation)除外，
设置float属性会使z-index失效，
受祖先元素设置的z-index影响，它是以祖先元素为准

修改input框中的placeholder样式

每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定

    input::-webkit-input-placeholder { /* WebKit browsers */

　　color: pink; font-size: 14px;

　　}

　　input::-moz-placeholder { /* Mozilla */

　　color: pink; font-size: 14px;

　　}

　　input:-ms-input-placeholder { /* Internet Explorer 10+ */

　　color: pink; font-size: 14px;

　　}

微信小程序修改input框中的placeholder样式(placeholder-class="类名")

文字溢出时用...代替

设置单行

    overflow: hidden;
    text-overflow: ellipsis; // 用省略号代替
    white-space: nowrap;

设置多行

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 设置具体几行
    -webkit-box-orient: vertical;

用vue开发项目时(修改组件库样式注意点)

不设置scoped属性

只需选中组件库样式类名，即可修改(注意：有些属性即使修改也不生效)这说明权重低了

{
    color: pink!important; // !important 意思就是权重最高的
}

设置scoped属性

scoped属性作用

让style里的选择器, 只能选择当前组件的标签(为了保证样式的独立性，不影响其他组件)

scoped原理

webpack打包的时候，会给组件标签上添加相同data-v-hash值，然后也会给所有选择器后面加上[data-v-hash]值的属性选择器（当前组件所有原生标签或者组件根标签）

解决

vue提供了一个::v-deep或/deep/样式语法, 设置后自动添加例：/deep/类名 => [data-v-hash值] 类名

关于一些CSS的属性 | 青训营笔记