CSS选择器

1.class选择器：

  1.通过class起名字。<标签 class=“类名”> </> 通过.l类名{声明；声明；}

  2.class选择器通过“.”(英文点号)名字设置样式，开发最常用

  3.长名称或词组可以使用横线来为选择器命名

  4.一定要用英文命名

10.多类名选择器

<div class="red font20>名称</div>

1.在标签class属性中写多个类名

2.多个类名中间必须用空格隔开

3.可以把一些标签元素相同的样式（共同的部分）放到一个类里面

4.这些标签都可以调用这个公共的类，然后再调用自己独有的类

5.节省CSS代码，使用起来也方便

2.id选择器

语法：#id名{属性：属性值;}

 说明：  

a.当我们使用id选择符时，应该为每个元素定义一个id属性；

  如：<div id="top"></div>  

b.id选择符的语法格式是“#”加上自定义的id名；

  如：#top{width:300px; height:300px;}   

c.起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)  

d.一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素 对象

所以一个id名称只能用一次，不能重复。  

e.最大的用处：创建网页的外围结构.

3. 群组选择器

 语法：选择符1，选择符2，选择符3......{属性：属性值;}

  说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。

 语法：选择器1，选择器2，选择器3，....{声明}

4.包含选择器

语法：选择符1 选择符2{属性：属性值;} 父元素 子元素{声明}

说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;

5.子代选择器:用>隔开基本选择器，表示后一个选择器是前面的子代

选择div里面所有最近一级的标签元素

父元素>子元素们{}

例：

<div>

<a></a>

<a></a>

<a></a>

</div>

.div>a

.p>a

.box>div

.box>div*3>div

6.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）

老大+老二{}

7.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素

老大~所有兄弟们{}

8.伪类选择器

  语法：

  a:link{属性：属性值;}选择所有未被访问的链接;

  a:visited{属性：属性值;}选择所有已被访问的链接;

  E:hover{属性：属性值;}鼠标划过元素时的状态;

  E:active{属性：属性值;}即鼠标正在按下时链接的状态;

*当这4个超链接伪类选择符联合使用时，应注意他们的顺序

  因为a链接在浏览器当中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

 input:focus 伪类选择器用于选取获得焦点的表单元素

 焦点就是光标，一般情况input类表单才能获取，因此这个选择器只针对表单元素来

9.目标伪类选择器

目标:target{} 被选中的目标添加样式

10.ui状态伪类选择器

1. :enabled 可用的表单元素添加样式

2. :disabled 不可用的表单元素添加样式(disabled )

3. :checked+E 被选中的表单元素添加样式

4. ：:selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)

11.结构伪类选择器

1. E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。

2. E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子

3. E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子

n的用法：（1）6n倍数 (2)even偶数  （3）odd奇数 （4）-n+5 选中1-5 

（5）E：nth-child(-n+3):ntch-child(n+2) 2-3个

4. E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子

5. E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子

6. E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子

7. E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子

8. E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子

9. E:empty 获取到空的E元素（连空格都不能有）

12.属性选择器

1. E[attr] 拥有attr属性的E元素添加样式

2. E[attr="val"] 拥有attr属性值为val的E元素添加样式

3. E[attr*="val"] attr属性值包含val的E元素添加样式

4. E[attr^="val"] attr属性值以val开头的E元素添加样式

5. E[attr$="val"] attr属性值以val结尾的E元素添加样式

13.伪元素

1. E::before给E元素添加第一个内容

   例：div::before{

       content:"输入内容";

       display:block;

       width:100px;

       height:100px;

       }

2. E::after 给E元素添加最后一个内容

3. E::first-letter给E元素第一个字添加样式

4. E::first-line给E元素第一行添加样式