一、CSS选择器常见的有几种?选择器的优先级是怎样的?
常用的有四种：文档元素选择器、类选择器、ID选择器、伪类选择器。
优先级：
1、最高优先：直接在标签中设置样式
2、次优先级：ID选择器
3、其次优先级：类选择器
4、最后优先级：标签选择器
二、class 和 id 的使用场景?
id：根据提供的唯一id号，快速获取标签对象。用于充当label标签for属性的值。
class:指定标签的类名。CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
三、使用CSS选择器时为什么要划定适当的命名空间？
1.提高代码可读性；2.便于维护管理；3.保持代码的可拓展性；4.避免结构冲突。
四、以下选择器分别是什么意思?
#header{}：ID选择器、定义id属性值header的样式。
.header{}：类选择器、定义class属性值header的样式。
.header .logo{}：类选择器、定义class属性值header中含 有"class=logo"的样式。
.header.mobile{}：多类选择器、定义class中同时含有header和mobile的样式。
.header p, .header h3{}：定义class属性值header下段落p和标题h3的样式。
#header .nav>li{}：定义ID选择器属性值header下的类选择器nav子元素li的样式。
#header a:hover{}：定义ID选择器属性值header中a链接动态伪类的样式。
五、列出你知道的伪类选择器？
Paste_Image.png
-
链接伪类：：link；：visited
-
动态伪类（用户行为伪类）：：focus ；：hover；：active
-
UI元素状态伪类（用于form元素）：：enabled；：disabled；：checked
-
语言选择的伪类：：lang()
-
伪元素选择器：：：first-letter；：：first-line ；：：before；：：after；：：selection
-
否定选择器：：not
-
CSS3的:nth选择器 1
:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的唯一一个了元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。
六、:first-child和:first-of-type的作用和区别？
:first-child 匹配的是某父元素的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个。
区别：是否允许父元素其他类型子元素的第一个。
七、运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
结果：
1.png
解释：.item1:first-child：定义某元素（div）第一个子元素的所有属性值为item1的元素设置字体为红色。第一个子元素为p元素，所以aa字体红色。
.item1:first-of-type：定义某元素（div）子元素中所有相同类的元素的第一个子元素属性值为item1下的元素设置背景色为蓝色。故aa、bb为蓝色。
（h3有两个，取第一个bb）
八、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
text-align: center作用是使内部文字水平居中。
作用在行内元素上，块级元素内文字会居中，文字外容器并不对齐。若要整个内容水平居中，需要在添加块级元素中添加text-align:center和margin：0 auto样式。或者说在块级元素中添加display：inline-block。
测试第一种：
Paste_Image.png
结果：
Paste_Image.png
第二种：
Paste_Image.png
结果：
Paste_Image.png
九、如果遇到一个属性想知道兼容性，在哪查看?
使用：caniuse查询
- 版权归本人及饥人谷所有，转载请注明出处。谢谢！
网友评论