一. 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时才发生