CSS选择器常见的有几种?
元素选择器:
div
ul
ol
h1-6
p
a
类选择器:
.class{}
id选择器:
#id{}
选择器的优先级是怎样的?
优先级:
!important是最高的,其次是标签里面的style,除!important之外,用style属性编写的规则总比其他规则特殊,具有id选择器的规则比没有id选择器的规则特殊。具有类选择器的规则比只有类型选择器的规则特殊,然后依次是伪类,属性,标签,通配符,浏览器自定义选择器,如果两个规则特殊性相同,则后定义的规则优先。
class 和 id 的使用场景?
class是代表一类,可以在页面上重复使用,比如某个可以重复使用的样式,布局,颜色等。
id是页面里独一无二的,可以用于页面的大块的布局,或者特有的属性,或者埋点。
使用CSS选择器时为什么要划定适当的命名空间?
使用命名空间后可以对特定的区域进行样式修改。
以下选择器分别是什么意思?
#header{} header的id选择器.header{} header的类选择器
.header .logo{} 既是header类的后代又是logo类的选择器
.header.mobile{} 一个既包含header又包含mobile的类选择器
.header p, .header h3{} header类的p元素选择器,以及header类的h3元素选择器
#header .nav>li{} id为header,里面类为nav的第一个li元素
#header a:hover{} id为header 里的a标签的伪类hover
列出你知道的伪类选择器
hoverfocus
active
after
before
:first-child和:first-of-type的作用和区别
:first-child是指第一个子元素
:first-of-type是指符合样式的第一个子元素,不一定是模块内的第一个子元素
运行如下代码,解析下输出样式的原因。
.item1:first-of-type{}是指同一个父元素下,同一标签里,class含有item1的第一个子元素
.item1:first-child{}是指同一个父元素下,class含有item1的第一个子元素
text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
text-align:center可以让模块内容居中,作用在块级元素上,可以让行内元素居中
如果遇到一个属性想知道兼容性,在哪查看?
caniuse.com