- CSS选择器的优先级是怎样的?
- link和@import的区别?
- 有那些方式(CSS)可以隐藏页面元素?
- em\px\rem区别?
- 块级元素水平居中的方法?
- CSS有几种定位方式?
- 如何理解z-index?
- 如何理解层叠上下文?
- 清除浮动有哪些方法?
- 你对css-sprites的理解
- 你对媒体查询的理解
- 你对盒模型的理解
- 标准盒模型和怪异盒模型有什么区别?
- 谈谈对BFC(Block Formatting Context)的理解?
- 为什么有时候人们用translate来改变位置而不是定位?
- 伪类和伪元素的区别是什么?
- 你对flex的理解?
- 关于CSS的动画和过渡问题
CSS选择器的优先级是怎样的?
CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器
到具体的计算层面,优先级是由A,B,C,D的值来决定的,其中它们的值计算规则如下:
- A的值等于1的前提是存在
内联样式
,否则A=0; - B的值等于
ID选择器
出现的次数; - C的值等于
类选择器
和属性选择器
和伪类
出现的总次数; - D的值等于
标签选择器
和伪元素
出现的总次数;
就比如下面的选择器,它不存在内联样式,所有A=0
,不存在id选择器B=0
,存在一个类选择器C=1
,存在三个标签选择器D=3
,那么最终计算结果为:{0,0,1,3}
ul ol li .red {
...
}
按照这个计算方式,下面的计算结果为:{0,1,0,0}
#red{
...
}
我们的比较优先级的方式是从A到D去比较值的大小,A,B,C,D权重从左到右,依次减小。判断优先级时,从左到右,一一比较,直到比较出最大值,即可停止。
比如第二个例子的B与第一个例子的B相比,1>0,接下来就不需要比较了,第二个选择器的优先级更高。
link和@import的区别?
- link属于XHTML标签,而@import是CSS提供的。
- 页面加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载。
- import只在IE 5 以上才能识别,而link是XHTML标签,无兼容问题。
- link方式的样式权重高于@import的权重。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不时dom可以控制的。
有哪些方式(CSS)可以隐藏页面元素?
opacity:0
: 本质上是将元素的透明度将为0,就看起来隐藏了,但是依然占据空间且可以交互。visibility:hidden
:与上一个方法类似的效果,占据空间,但是不可以交互了。overflow:hidden
:这个只隐藏元素溢出的部分,但是占据空间且不可交互。display:none
:这个是彻底隐藏了元素,元素从文档流中小时,即不占据空间也不交互,也不影响布局。z-inde