web学习第三周

1、选择器

46、标签群组通配等选择器

标签选择器（TAG选择器）

div{}              < div></div>
使用的场景：
1.去掉某些标签的默认样式时。
2.复杂的选择器中：层次选择器

群组选择器（分组选择器）
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

通配选择器
*{}->div，ul，li，p，h1，h2…{}
注：尽量避免使用通配选择器，因为会给所以标签添加样式，慎用。
使用的场景：去掉所有标签的默认样式时

47、层次选择器

• 后代 M N{ }
• 父子 M>N { }
• 兄弟 M~N { } 当前M下的所有兄弟N标签
• 相邻 M+N { }当前M下相邻的N标签
  
  
  
  

48、属性选择器

M【attr】{}
=:完全匹配
*=：部分匹配
^=：起始匹配
$=：结束匹配
[] [] [] :组合匹配

1

1

49、伪类选择器（hover类）

M：伪类{}

• ：link 访问前的样式 (只能添加给a标签)
• ：visited 访问后的样式 （只能添加给a标签）
• ：hover 鼠标移入时的样式 （可以添加给所有的标签）
• ：active 鼠标按下时的样式 （可以添加给所有的标签）

注：
一般的网站都只设置
·
a{} (link visted active) a:hover{}
**如果四个伪类都生效，一定要注意顺序：L V H A

展示：

一般网页格式：

可以在设置中清除浏览记录

50、伪类选择器（after类）

：after ：before 通过伪类的方式给元素添加文本内容，使用content属性
：checked ：disabled（都是针对表单元素）
：focus 获取光标（都是针对表单元素）

after ，before



也可以镶嵌span

checked，disabled

focus

51、（结构）伪类选择器

nth-of-type()和nth-chlid()之间的区别
type：类型
child:孩子（类型要对，位置也要对）

通过改变n去调控