作业8
CSS选择器常见的有几种?
1.基础选择器
*通用元素选择器：匹配页面任何元素
#idid选择器：匹配特定id元素
.class类选择器：匹配class包含特定的元素
element标签选择器
2.组合选择器
.E,.F{ }多元素选择器：同时匹配 .E和.F元素
.E .F{}派生选择器:选择e元素的所有后代f元素（如果不是子元素，向下递归）
.E>.F{ }子元素选择器：选择E元素的所有直接子元素F
.E+.F直接相邻选择器：匹配E元素之后的相邻统计元素F
.E~.F普通相邻选择器：匹配e元素之后的所有同级元素F（不论是否相邻）
3.属性选择器
E[attr]:匹配所有具有属性为attr的元素（div[id]能选择所有具有id属性的div）
E=[attr=value]:匹配所有属性为value的元素（div[type=text]匹配id=text的div）
E[attr~=value]:匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素
E[attr ^=value]:匹配属性attr的值以value开头的元素
E[attr $=value]:匹配属性attr的值以value结尾的元素
E[attr *=value]:匹配属性attr的值包含value的元素
4.伪类选择器
E:first-child:匹配元素E的第一个子元素
E:last-child:匹配元素e的最后一个子元素
E:nth-child(n):匹配其父元素的第n个子元素，第一个编号为1
E:first-of-type:匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)
E:hover:匹配鼠标悬停智商的e元素
E:focus:匹配获得焦点的e元素
5.伪元素选择器
E::first-line:匹配E元素的第一行
E::first-letter:匹配E元素的第一个字母
E::before:在e元素之前插入生成的内容
E::after:在e元素之后插入生成的内容
选择器的优先级是怎样的
从高到低是：
1.在属性后面使用!important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6属性选择器
7.标签选择器
8.通配符选择器（使用星号*表示，意思是“所有的”）
9.浏览器自定义
①作用的更具体的选择器优先级越高
a：#parent p.class1
b：div #child.class1
<div id="parent">
<p id="child" class="class1">
Text
</p>
</div>
两个选择器作用的元素都是p标签，id选择器优先级最高，第一条规则作用宰了父元素身上，第二条作用在p标签上，所以第二条选择器优先级高
②两个选择器优先级一样，后面的覆盖前面
class和id的使用区别
1.id和class都是选择器，id样式优先级高于class，
2.id具有唯一性，class具有普遍性
3.id是唯一的，所以尽量在结构外围使用，通常用于页面布局
4.class是可重复的，所以尽量在结构内部使用，用场用于样式定义
使用CSS选择器时为什么要划定适当的命名空间
1.避免命名不规范而导致的出错
2.代码易于写作与维护，提高代码可读性，增强语义化
以下选择器分别是什么意思?
#header{} :id="header"的选择器
.header{} :class="header"的选择器
.header .logo{}:以“.header”的后代class“.logo"为对象的选择器
.header.mobile{}:同时匹配两个class“.header"和".mobile"
.header p, .header h3{}:匹配class=header的后代中的p和h3
#header .nav>li{}:匹配id=header的后代中的class=nav中的直接子元素li
#header a:hover{}:匹配id=header元素中 a链接鼠标悬停的效果
列出你知道的伪类选择器
E:first-child:匹配父元素（E)中的第一个子元素
a:link:匹配所有未被访问的链接
a:visited:匹配所有被访问的链接
E:active:匹配鼠标按下没有放开时的元素E
E：hover:匹配鼠标悬停时的元素E
E:focus:匹配当前焦点上的元素e
E:lang(en):匹配lang属性等于(en)的元素E
E:enabled:匹配在表单中激活的元素E
E:disabled:匹配在表单中禁用的元素E
E:checked:匹配在表单中被选中的元素E
E:selection:匹配用户选中的元素E
E;root:匹配文档中的根元素
E:last-child:匹配父元素中的最后一个子元素E
E:only-child:匹配父元素的仅有一个子元素E
E:nth-child(n):匹配父元素中的第n个子元素e
E:nth-last-child(n):匹配父元素中第n个倒数子元素e
E:first-of-type:匹配父元素中的使用同种标签的第一个子元素e
E:last-of-type:匹配父元素中使用同种标签的最后一个子元素e
E:only-of-type:匹配父元素中的使用同种标签唯一一个元素e
E:nth-first-of-type(n):匹配父元素中使用同种标签的第n个子元素e
E:nth-last-of-type(n):匹配父元素中使用同种标签的倒数第n个子元素e
:first-child和:first-of-type的作用和区别
:first-child用于选取属于其父元素的子元素的指定选择器，其匹配的元素必须为某个父元素的第一个子元素
first-of-type,选择器匹配属于其父元素的特定类型的首个子元素的每个元素。其匹配的元素为所有子元素中的第一个标签（不论是否喂第一个子元素)
first-of-type,与first-child的区别在于前者匹配的事该元素类型的第一个子元素，可能这个元素并不是该元素的第一个子元素
first-child在任何情况下都只能匹配到一个元素，而first-of-type能匹配到不止一个元素
运行如下代码，解析下输出样式的原因
Paste_Image.png
.item:first-child表示匹配的是class=item1下的第一个子元素，对象唯一，显示字体红色
.item1:first-of-type:表示匹配的是classitem1下所有类型的第一个子元素。aa是p标签下第一个子元素。bbb是h3标签下第一个子元素。
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用是块级元素中行内元素水平居中，作用在块级元素中，text-align只作用容器中inline元素，对block元素无效果。想让div手作用，可以加一个display:inline-block
如果遇到一个属性想知道兼容性，在哪查看?
