css问题集锦

1.flex,布局,不被压缩,超过父级部分显示滚动条

关键就是给子元素加上：

// 给子元素加上如下两行代码，保障flex下子元素宽度不变
//flex-grow 属性用于设置或检索弹性盒子的扩展比率
//flex-shrink 属性指定了 flex 元素的收缩规则
 flex-grow: 0;
 flex-shrink: 0;

2.设置顶部左部固定

position：sticky；//粘性定位
top：0；//顶部固定
z-index：100；//提高层级，在滚动的内容上面

position：sticky；//粘性定位
left：0；//顶部固定
z-index：100；//提高层级，在滚动的内容上面

3.行的宽度固定，滚动超过固定行的宽度时，样式出错

//设置行宽
row {
width:fit-content;
}

4.如何彻底取消input color的边框?

        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        input[type="color"]::-webkit-color-swatch {
            border: 0;
        }

5.css选择器包含A类名不包含B类名(如何在CSS选择器中排除特定的类名？)

.reMode_hover:not(.reMode_selected):hover

{
background-color: #f0ac00;

}

.A:not(.B):focus{

//
}