前端面试之CSS优先级顺序

html+css
方式/
1下面是CSS优先级挨次由高到低
优先级最高的-!important
用法是写在通俗css属性的后面 , 这样就能实现第一流的css了 , css样式写法如下

前端面试之CSS优先级顺序



2下面是CSS优先级挨次由高到低
行内样式
行内样式是经由过程style=“” , 这样直接写在标签里面 , css样式写法如下

前端面试之CSS优先级顺序



3下面是CSS优先级挨次由高到低
ID选择器
ID在html中是独一的 , 经由过程#加名字 , css样式写法如下

前端面试之CSS优先级顺序



4下面是CSS优先级挨次由高到低
类选择器
类在css经由过程class来定名 , 利用方式是.加名字 , css样式写法如下


前端面试之CSS优先级顺序



5下面是CSS优先级挨次由高到低
标签
标签指div,p,span这种 , css样式写法如下

前端面试之CSS优先级顺序



6下面是CSS优先级挨次由高到低
通配符
经常用的有* , 它会把所有的样式都改变 , 一般用来重置样式 , 写法如下

前端面试之CSS优先级顺序



7下面是CSS优先级挨次由高到低
担当
指的是父标签设置样式 , 而子标签没有设置样式 , 子标签会担当父标签的样式
一般用于文本文字 , 例如font-size , color等
具体写法如下

前端面试之CSS优先级顺序



8下面是CSS优先级挨次由高到低
浏览器默认样式
每个浏览器的默认样式都分歧 , 为了同一开辟样式 , 我们一般城市设置一个重置样式 , 下图为谷歌浏览器自带的padding属性为8px ,

前端面试之CSS优先级顺序



9最后总结一下:CSS优先级挨次
【前端面试之CSS优先级顺序】!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 担当 > 浏览器默认样式


以上内容就是前端面试之CSS优先级顺序的内容啦 , 希望对你有所帮助哦!

    猜你喜欢