CSS选择器

CSS选择器常见的有几种?

1.基础选择器

选择器	含义
*	通用选择器，匹配页面所有元素，很少使用
#id	id选择器，匹配特定id的元素
.class	类选择器，匹配class包含特定类的元素
element	标签选择器，一般在reset时使用

基础选择器.png

2.组合选择器

选择器	含义
E,F	分组选择器，同时匹配E,F两个元素
E F	后代选择器，同时匹配E的后代中的所有F元素
E>F	子元素选择器，匹配E元素的所有直接子元素
E+F	直接相邻选择器，匹配E元素之后的相邻同级元素F
E~F	普通相邻选择器，匹配到E元素之后的同级元素F

组合选择器.png

3.属性选择器

选择器	含义
E[attr]	匹配所有具有属性attr的元素
E[attr=value]	匹配属性attr值为value的元素
E[attr~value]	匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr^=value]	匹配属性attr的值以value开头的元素
E[attr$=value]	匹配属性attr的值以value结尾的元素
E[attr*=value]	匹配属性attr的值包含value的元素

属性选择器.png

4.伪类选择器

选择器	含义
E:first-child	匹配元素E的第一个子元素
E:hover	匹配鼠标悬停其上的E元素
E:nth-child(n)	匹配其父元素的第n个子元素
E:last-child	匹配父元素的最后一个子元素
E:first-of-type	从一组中选择第一个元素同级选择孩子里面的第一个
E:[attr*=value]	从一组中选择最后一个

伪类选择器.png

5.伪元素选择器

选择器	含义
E::first-line	匹配E元素内容的第一行
E::first-letter	匹配E元素内容的第一个字母
E::before	在E元素之前插入生成的内容
E::after	在E元素之后插入生成的内容

结合各类选择器可以实现一个自己的小型组件库：

小型组件库.png

选择器的优先级是怎样的?

在属性后面使用!important
作为style属性卸载元素标签的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

在一些复杂的情况下，我们会依靠权重计算。
id选择器的权值为1000，class选择器为100，标签选择器为10，如果两个选择器权值相同则后面的样式覆盖前面的样式。

class 和 id 的使用场景?

class使用场景：默写需要特定样式的标签放在同一个class中，需要这一样式的标签则可以在标签上添加此类。
id使用场景：根据提供的唯一id号，快速获取标签对象，用于充当label标签for属性的值。

使用CSS选择器时为什么要划定适当的命名空间？

提高代码的可读性
便于管理维护
保持代码的拓展性

以下选择器分别是什么意思?

#header{
  /*id选择器*/
}
.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伪类*/
}

列出你知道的伪类选择器

E:hover
E:active
E:link
E:visited
E:focus
E:first-child
E:first-of-type
E:nth-child(n)
E:nth-of-type(n)
E:last-child
E:last-of-type
E:nth-last-child(n)
E:nth-last-of-type(n)

:first-child和:first-of-type的作用和区别?

E:first-child和E:first-of-type的区别：

first-child匹配的是某个父元素的第一个子元素，可以说是结构上的第一个子元素。
first-of-type匹配的是某父元素相同类型子元素的第一个，比如p:first-of-type，就是只所有类型为p的子元素的第一个，这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

first-child和first-of-type.png

运行如下代码，解析下输出样式的原因。

<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>

代码示例.png

.item1:first-child{
  color: red;
}

这段代码的作用是.item1会根据父元素的伪类first-child选择第一个直接子元素，确定了第一个子元素<p>所以aa变成红色。

.item1:first-of-type{
  background: blue;
}

这段代码.item1会根据父元素的伪类first-of-type选择相同类型的子元素，当遇见第一个标签<p>时，该标签是这一类元素的第一个子元素，所以其北京元素会编程蓝色。而遇到标签<h3>时，该标签又是该类标签的第一个子元素，所以其背景色也编程蓝色，而在往下的cc不是该组标签的第一个子元素，所以无变化。

`text-align:center`的作用是什么，作用在什么元素上？能让什么元素水平居中？

作用是让内联元素对象在块级元素中居中，主要是让内联元素居中。在有固定宽度的块级元素中，也可以通过设置margin:0 auto让块级元素居中。

text-align.png

如果遇到一个属性想知道兼容性，在哪查看?

在can i use中查看。