css基础笔记

1、css样式优先级

CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。

<div>
    <p></p>
</div>
// <div> 有个属性 color: red，则这个属性将被 <p> 继承，
// 即 <p> 也拥有属性 color: red。

CSS 优先规则2："直接样式"比"祖先样式"优先级高。

<div style="color: red">
    <div style="color: blue">
        <div class="son"></div>
    </div>
</div>

CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

• ID 选择器， 如 #id{}
• 类选择器， 如 .class{}
• 属性选择器， 如 a[href=“segmentfault.com”]{}
• 伪类选择器， 如 :hover{}
• 伪元素选择器， 如 ::before{}
• 标签选择器， 如 span{}
• 通配选择器， 如 *{}

CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

• 后代选择符： .father .child{}
• 子选择符： .father > .child{}
• 相邻选择符: .bro1 + .bro2{}

CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。

2、如何修改 chrome 记住密码后自动填充表单的黄色背景？

chrome表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的in
put表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

input:-webkit-autofill {
background-color:rgb(250,255,189)!important;
background-image:none!important;
color:rgb(0,0,0)!important;
}

对chrome默认定义的background-color，background-image，color使用important是不能提高其优先级的，但是
其他属性可使用。

使用足够大的纯色内阴影来覆盖input输入框的黄色背景，处理如下

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
-webkit-box-shadow:000px 1000px white inset;
border:1px solid #CCC !important;
}