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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.class 和 id 的使用场景? 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也...
    草鞋弟阅读 2,477评论 0 1
  • 1.class 和 id 的使用场景? 两者都能选取DOM节点并给DOM节点添加样式,但是W3C标准里规定页面中只...
    饥人谷_米弥轮阅读 426评论 0 1
  • class 和 id 的使用场景? 每个标签只能设置一个id,此id在页面中只能出现一次。id多用于页面分块时块级...
    cross_王阅读 451评论 0 0
  • CSS选择器 标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然...
    Jackson_yee_阅读 515评论 0 0
  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 1,213评论 0 0