(3) CSS

1.CSS 选择器

　　(1)ID选择器

　　　　　　格式:

　　　　　　　　　#elem{}

　　　　　　　　　html: <tag id="elem">content</tag>　

　　　　　　注意:

　　　　　　　　(1.1)在一个页面中，id是唯一的

　　　　　　　　(1.2)命名规范:字母_-数字(数字不能作为开头)

　　　　　　　　(1.3)命名方式:

　　　　　　　　　　　　　　驼峰式

　　　　　　　　　　　　　　短线式

　　　　　　　　　　　　　　下划线式

　　　　　　快捷创建: tag#id

 

　　(2)Class选择器

　　　　　　格式:

　　　　　　　　.elem{}

　　　　　　　　html <tag class="elem">content</tag>

　　　　　　注意:

　　　　　　　　(2.1)class选择器是可以复用的

　　　　　　　　(2.2)可以添加多个class样式

　　　　　　　　(2.3)多个样式的时候，优先级由CSS决定，而不是Class的顺序决定

　　　　　　　快捷创建:tag.class

 

　　(3)标签选择器

　　　　　　格式:

　　　　　　　　tag{}

　　　　　　　　html <tag></tag>

　　　　　　使用场景:

　　　　　　　　(3.1)去除某些样式的默认值

　　　　　　　　(3.2)用于复杂的选择器中

　　　　

　　(4)群组选择器

　　　　　　格式:

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

　　　　　　　　div,span,p{}

 

　　(5)通配选择器

　　　　　　格式:

　　　　　　　　*{}

　　　　　　使用场景:去掉所用样式的默认样式时

　　　　　　　　　

　　(6)层次选择器

　　　　　　后代 M N {}

　　　　　　父子 M > N {}

　　　　　　兄弟 M ~ N {} 当前M下所有的兄弟N标签(往下找N)

　　　　　　相邻 M + N {} 当前M下相邻的N标签(往下找N)

 

　　(7)属性选择器

　　　　　　M[attribute]{}

　　　　　　注:其中attribute可以为任何属性,例如:id、class、name

　　　　　　例:　

div[name]{background-color: red;}

<div name="box">bbbbb</div>
<div name="search">ccccc</div>

　　　　解释:凡是带有name属性的标签都会被选中并设置样式

　　　　　　（7.1) 完全匹配

　　　　　　　　　　= :完全匹配

　　　　　　　　　M[attr="property1"]{}

　　　　　　　　　div[class="box"]{background: red;} = 所有属性为box的容器才被选中

 

　　　　　　（7.2)部分匹配

　　　　　　　　　　M[attr*="property1"]{}

　　　　　　　　　　*= :部分匹配

　　　　　　　　　　div[class*="search"]{background: red;} *=只要带有search即会被选中

 

　　　　　　(7.3)起始匹配

　　　　　　　　　　M[attr^="property1"]{}

　　　　　　　　　　^= :起始匹配　　　　　　　　

　　　　　　　　　　div[class^="search"]{background-color: red;}

 

　　　　　　(7.4)结束匹配

　　　　　　　　　　M[attr$="property1"]{}

　　　　　　　　　　$= :结束匹配

　　　　　　　　　　div[class$="search"]{background: red;} 

 

　　　　　　(7.5)组合匹配

　　　　　　　　M[attr1][attr2][attr3]....{ }

　　　　　　　　组合匹配

 

　　　　　　　　div[id][class]{background-color: red;}

　　　

　　　　　　　　<div id="div1" class="div-elem">aaaa</div>

　　　　　　　　<div id="div2">bbbb</div>

　　　　　　

　　(8)伪类选择器

　　　　　概念:CSS伪类用于向某些元素添加特殊效果。一般初始样式添加不上的时候，用伪类来添加

　　　　　格式:M:伪类{}

　　　　　　(8.1) 鼠标伪类选择器

　　　　　　　　:link 访问前的样式(只能添加给a标签)

　　　　　　　　:visited 访问后的样式(只能添加给a标签)

　　　　　　　　:hover 鼠标移入时的样式(可以添加给所有的标签)

　　　　　　　　:active 鼠标按下时的样式(可以添加给所有的标签)

　　　　　　　　如果四个伪类都生效，则要注意顺序，L、V、H、A

 

　　　　　　（8.2) :after :before 伪类选择器

　　　　　　　　:after 通过伪类的方式给元素增加一些内容，用content属性

　　　　　　　　:before 通过伪类的方式给元素增加一些内容，用content属性

 

　　　　　　 (8.3) 表单元素伪类选择器

　　　　　　　　:checked　　input checkbox 被选中时的样式

　　　　　　　　:disabled　　input checkbox 禁用时的样式

　　　　　　　　:focus　　　input text 聚焦时的样式

　　　　　　(8.4) 结构伪类选择器

　　　　　　　　:nth-of-type()

　　　　　　　　:nth-child()

　　　　　　　　角标是从1开始的，1代表第一项，2代表第二项，n代表无穷大

　　　　　　　　2n代表偶数(2,4,6,8......) 2n+1代表奇数(1,3,5,7....)

　　　　　　　　

　　　　　　　　:first-of-type 第一个

　　　　　　　　:last-of-type 最后一个

　　　　　　　　only-of-type 仅有的一个

　　　　　　　　注: :nth-of-type()和nth-child()的区别

　　　　　　　　　　type:类型　　child:孩子