css样式总结(持续更新中…)

1.css的权重问题

css权重级别遵循4个原则:

权重越高样式级别越高

!important:10000 是我自己加上去的，因为在所有样式中，只要加了!important的，样式级别就是最高的了。

如果css的权重值相同，遵循后来居上原则，后面的样式会覆盖前面的样式。

相同权重，子元素的样式优于从父元素那里继承过来的样式。

!important:10000 
行内样式：1000；
id：100；
class、属性选择器、伪类：10
元素or伪元素：1
通配符*：0，
下面来举栗子啦：
*{font-size:20px} 权重：0
* p{font-size:19px} 权重：0+1=1
* .name p {font-size:18px} 权重：0+10+1=11
* #id p {font-size:17px} 权重:0+100+1=101
* #id .name p{font-size:16px} 权重:0+100+10+1=111
* #id:nth-type-of(1){font-size:15px} 权重:0+100+10=110
* .name::before{font-size:14px} 权重：0+10+1=11
元素内联style="{font-size:14px}" 权重:1000
p{font-size:13px !important} 权重:10000+1=100001

2.一些少见但是比较实用的css样式

1.appearance 去除input文本框的内阴影

使 div 元素看上去像一个按钮：
div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}
ormal将元素呈现为常规元素。
icon将元素呈现为图标（小图片）。
window将元素呈现为视口。
button将元素呈现为按钮。
menu将元素呈现为一套供用户选择的选项。
field将元素呈现为输入字段。
经常用来消除input框内部的灰色内阴影
inpput{appearance:none;}

2.tap-highlight-color 消除移动端触发点击事件，元素出现灰块

* {tap-highlight-color: transparent;}

引用自MDN

-webkit-tap-highlight-color 是一个没有标准化的属性，能够设置点击链接的时候出现的高亮颜色。显示给用户的高光是他们成功点击的标识，以及暗示了他们点击的元素。