一、CSS选择器常见的有几种?
id选择器:独一无二的,划分大区块 #div{border:1px solid red;}
class选择器:同一类型的区块,小区块class=“intro other other2”
标签选择器:不常用,范围太大。去除默认样式,用标签选择器。标签选择器的使用常见的有:a{text-decoration:none},li{display:none},其他一般不用
通用元素选择器,一般使用规则为*{padding:0;magrgin:0;}
属性选择器 input[type="text"]用中括号表示
分组选择器用,逗号隔开。如h1,p{}是表示h1和p用同一样式
派生选择器(子元素选择器,自己的后代,并不是直接子元素):选择某个元素的子元素.中间用空格隔开 .box h1{}表示box类下的所有h1都会改变,box类之外的不影响
.box h1(中间是空格)。只选择box里面的h1,其他的h1没有影响
直接子元素选择器.box > h1是.box下的直接子元素,即跟h1在同一层级,没有被其他的div 或其他嵌套的h1
.box#footer选择的是类为boxid且id为footer,同时存在的
h1.class1标签选择和类选择同时满足时,才会进行相应样式修改
h1 .class1后代选择器,表示h1下的类class1
伪类选择器,最多 使用的是a:hover{}
二、选择器的优先级是怎样的?
优先级从上到下依次更低级
1、在属性后面加上!important的优先级最高
2、作为style属性写在元素内部的行内样式
3、id选择器
4、类选择器
5、伪类选择器
6、属性选择器
7、标签选择器
8、通配符选择器
9、浏览器自定义
如果是两个或者多个的话(除行业样式外,行内样式权重太高为1000),ID选择器100,类、伪类和属性选择器10,标签和伪元素选择器1,进行相加,得到的数值越大,权重越大
三、class 和 id 的使用场景?
1、一个标签只能有一个id.一个id只能使用一次(类似于一个人只有一个身份证,一个身份证只能让一个人使用),而且一个标签可以有多个类<div class="box1 box2"/>,一个类也可以用再多个标签上
2、当有几个元素有共同属性时,用class,独一无二的属性时,用id.一般情况下,大的层一般用id,里面的小块样式一样时,一般用class.
四、使用CSS选择器时为什么要划定适当的命名空间?
1、使代码页面更具有语义化,增加可读性
2、方便后期代码维护的修改完善.
五、以下选择器分别是什么意思?
#header{} 名为header的id选择器,引用时id="header"
.header{} 名为header的类选择器 ,引用时为class="header"
.header .logo{} 后代选择器,名为header的类选择器下的名为logo的类选择器 引用时类似为<div class="header"><div class="logo"></div></div>
.header.mobile{} 名为header的类选择器同时名为mobile的id选择器 引用时为class="header mobile"
.header p, .header h3{}大块为分组选择器,名为header的类选择器的后代p标签和header类名后代是我h3标签共同具有的属性
#header .nav>li{}后代的直接子元素选择器,为header的id选择器的后代名为nav的类选择器的直接子元素li标签属性
#header a:hover{}名为header的ID选择器的后代a标签的鼠标放上的属性
六、列出你知道的伪类选择器
cursor鼠标,属性有pointer(手型)、copy(竖线)
hover
active
focus(表单,输入框,默认样式去除)
before
after
七、:first-child和:first-of-type的作用和区别
:nth-of-type(3)第3个元素
:nth-child(3)第三个孩子
.box > h1 :nth-of-type(3).box下面的第三个h1,不是h1的忽略,继续找
.box > h1 :nth-child(3)看.box下面的第三个孩子是不是h1如果是的华进行样式修改,不是就无作用
first-child:父元素中的第一个子元素
first-of-type:父元素的子元素中每个类型(即每一种标签或者第一个内容,比如没有标签包括,直接是元时,也是第一个出现的不同的值)第一个出现的元素
八、运行如下代码,解析下输出样式的原因。
九、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
text-align:center是水平居中。作用在块级元素上,代码写在块级元素上,使该块级元素包括的行业元素水平居中,
十、如果遇到一个属性想知道兼容性,在哪查看?
can i use 网站