css序选择器

1，id一般都是留给js使用的，样式一般用类名，而且在同一个文本下不能重复

2.一个标签可以绑定多个类名

3.后代选择器----所有指定的，儿子，孙子。。。。

标签名称1 标签名称2，id名，class名{}

4.子元素

标签名称1>标签名称2>{

属性：值；

}

注意：子元素只会选择儿子，不会查找其他被嵌套的部分

不要有空格，

5.后代选择器与子元素区别

1）后以空格隔开

子以>隔开

2）后选中所有特定后代标签

子以只会选择特定的儿子标签

3）都可以选择标签名，id名，class名，可以通过它们自己的连接符合一直连接下去

6.交集选择器

作用：给所有选择器选中的标签中，给相交的部分设置属性

格式：选择器1选择器2{}

注意：选择器与选择器之间没有连接符，

交集选择器实例

7，并集选择器

作用：给所有选择器指定样式

格式：选择器,选择器,

并集选择器实例

8.兄弟选择器

1）相邻兄弟选择器

作用：给指定选择器后面相邻紧跟的那个选择器中的标签设置属性

格式：

选择器1+选择器2{
   属性值

}

注意：

相邻兄弟选择器只能选中紧跟其后的那个标签，不能选择被隔开的标签

html实例 样式，h1紧跟的p标签颜色变为红色

2）通用兄弟选择器

作用:给指定选择器后面那个选择器中的标签设置属性

格式：选择器~选择器{}

注意：指定选择器后面某个选择器指定的标签

所有h1后面的p标签的字体颜色都变成红色

9.css3新增的选择器个数选择器

常用的

1）选择同级别的不区分类型

选择器:first-child:选择同级别的第一个标签；

注意点：不区分类型

样式 同级别下第一个标签是h1,不是p所以上面的那个样式是无效的 这样同级别下第一标签为p，这样的样式就是有效的

选择器：last-child{

}

样式 不区分类别，只有33显示为红色

:nth-child(n)同级别下的第几个元素

样式

样式

两个22都会变成红色

两个22都会变成红色

:nth-last-child(n)同级别下的倒数第几个元素

样式

第一个的33和第二的22都变成了红色

2）同级别中同类型的

选择器:first-of-type{             -------------同级别中的第一个标签

}

样式 这样11就变成红色

last-of-type同级别同类型的最后一个

样式 这样的话，两个33都变成红色

:nth-of-type(n)同级别同类型下的第几个元素

样式 两个33都变成红色

nth-last-of-type(n)同级别同类型下的倒数第几个元素

样式

两个22都变成红色

3）only-child选中父元素中唯一的元素

样式 body下有p和div两个元素，div下只有p这一个元素，所以p标签下的字体颜色为红色

4）only-of-type

样式 body下有一个p标签和div下也只有一个p标签所以都变成红色

5)同级别的所有的奇数或者偶数标签变成红色

nth-child(odd)   xn+y n从0开始

nth-child(even)

6）同级别同类型的

nth-of-type(odd)    xn+y n从0开始

nth-of-type(even)