第四天（css选择器）

一. css选择器

1.ID选择器

格式：

css:   #elem{}
html:  id='elem'
注：两者形成映射关系

快捷创建有id属性标签：如div#elem ——> <div id='elem'></div>

注：只能为一个值

2.class选择器

格式：

css:   .elem{}
html:   class='elem'
注：class中可以加多个值，有重复样式时，按照css样式顺序

快捷创建有id属性标签：如div.elem ——> <div class='elem'></div>

3.标签选择器

格式：

css:   div{}
html:  <div></div>

使用场景：

1.去掉某些标签默认样式时

2.复杂选择器中，如层次选择器

4.群组选择器

格式：

css: 
    div,p,span{}   <--等价--> div,.p,#span{}   (可以套嵌)

通过逗号方式，给多个不同选择器添加统一css样式来达到代码复用

5.通配选择器

格式：

*{}  -->所有标签添加    注：尽量避免使用
使用场景：去掉所有标签默认样式

6.层次选择器

后代： M N ：ul li{} ：表示后代li样式（可用使用后代后代）

父子： M >N: ul>li{}：标配是ul后代lu样式（后代的后代没有）

兄弟：M~N：m~n{}：表示m当下的所有n标签

相邻：M+N：m+n{}：当前m相邻的n标签（下面的标签）

7.属性选择器

格式：M[ attr ]  { }

=	*=	^=	$=	M[attr1][attr2]
完全匹配	部分匹配	起始匹配	结束匹配	同时满足（多个）

例子：

(1)div[class='box1']{}     ---->      <div class='box1'></div>
(2)div[class*='search']{}  ---->      <div class='boxs-search'></div>
(3)div[class^='search']{}  ---->      <div class='search-botton'></div>
(4)div[class$='search']{}  ---->      <div class='botton-search'></div>
(5)div[class][id]{}        ---->      <div class=' ' id=' '></div>

8.伪类选择器

css伪类用于某些元素添加特殊效果，一般用于初始样式添加

格式：M：用法{ }

：link	访问前样式（只能用于a标签）
：visited	访问后样式（只能用于a标签）
：hover	鼠标移入时样式（所有）
：active	鼠标按下时样式（所有）
：after	给元素添加一个文本内容
：before	给元素添加一个文本内容
：checked	针对表单元素
：fous	获取光标时添加的样式

1.如果四个伪类都生效，顺序：：link      ：visited     ：hover    ：active注意：

2.一般网站只设置：hover伪类

3. 如div：after{content：‘ ’world } 在divv标签后面添加world文本。注：作用在于给初始内容添加样式不想给其他添加

9.结构性伪类选择器

1.nth-of-type（）、nth-child（）

ex：标签：nth-of-type（数值）

注：数值可为数字，也可为n

2.first-of-type（）   选择开头一个

last-of-type（）   选择最后一个

only-of-type（）   当集合为1时才发生