CSS学习笔记（二）

选择器

一、标签选择器

• 格式：

   标签名称{
    属性名称：属性值
    }
  

二、id选择器

• 格式：

   #id名{
    属性名称：属性值
  }
  

• 注意点：

1、每个标签都有一个属性id
2、同一个界面中id的名字不可以重复
3、id名称前加”#“
4、id的名称只能由数字字母和下划线组成并且不能以数字开头、也不能是html标签的名称
5、在企业开发中 id是留给js使用的

三、类选择器

• 格式：

   .类名{
    属性名称：属性值
  }
  

• 注意点：

1、每个标签都有一个属性class
2、同一个界面中class的名字不可以重复
3、id名称前加” . “
4、类名和id名命名规则一样
5、类名专门给css用来设置样式的
6、每个标签可以同时设置多个class

四、id 选择器和class

• 注意点：

1、 id不可以重复 class可以
2、一个标签只能绑定一个id 可以绑定多个class
3、id一般给js使用 class一般给class

五、后代选择器

• 格式：

   选择器名 选择器名{
    属性名称：属性值
  }
  

• 注意点：

1、必须用空格隔开
2、只要最终放到指定标签中的都是后代
3、后代选择器 可以使用任何选择器
4、可以无限往下延伸

六、子元素选择器

• 格式：

  选择器名称1>选择器名称2{
    属性：值；
  }
  

• 注意点：

1、子元素选择器只会查找儿子，不会查找其他被嵌套的标签
2、子元素选择器之间需用>符号连接，并且不能有空格
3、不仅可以使用标签，还可以使用其他选择器

七、交集选择器

• 格式：

  选择器名称1选择器名称2{
    属性：值；
  }
  

• 注意点：

1、选择器和选择器之间没有任何的连接符
2、用的不多

八、并集选择器

• 格式：

  选择器名称1,选择器名称2{
    属性：值；
  }
  

• 注意点：

1、必须使用” ，“连接
2、选择器可以使用 标签名称/id名称/class

九、兄弟选择器

• 格式：

  选择器名称1+选择器名称2{
    属性：值；
  }
  

• 注意点：

1、相邻兄弟选择器 ： 用+号连接 并且紧跟其后
2、通用兄弟选择器 CSS3 ：用 ” ~ “连接 指定选择器后的标签

十、序选择器

• 1、同级别的第几个

  • :first-class 选中同级别的第一个标签
  • :last-child 同级别的最后一个
  • :nth-child(n) 同级别的第几个
  • :nth-last-child 同级别的倒数第几个
  • :only-child 选中父元素中唯一的元素
  • :nth-child(odd) 同级别的奇数
  • :nth-child(even) 同级别的偶数
  • :nth-child(xn+y) x 、y自定义

• 2、同类型的第几个

  • ：first-of-type 选中同级别同类型的第一个
  • ：last-of-type 同级别中同类型的最后一个
  • ：nth-of-type 同级别同类型的第n个
  • ：nth-last-of-child 同级别中同类型的倒数第几个
  • ：only-of-type 选中父元素中唯一类型的某个标签
  • ：nth-of-type(odd) 同类型的奇数个
  • ：nth-of-type(even) 同类型的偶数个

十一、属性选择器

• 格式：

  标签名称[attr = value]{
    属性：值；
  }
  

• 1、属性取值是以什么开头的
  [attribute |= value] CSS2
  [attribute ^= value] CSS3
  两者区别： [attribute |= value] css2只能找到 value-name 用横线连接的
  [attribute ^= value] CSS3能找到任何以value开头的

• 2、属性取值包含什么value
  [attribute ~= value] CSS2 sd value dsf 包含value 并且被空格隔开
  [attribute *= value] CSS3 只要包含

• 3、属性取值以什么value结尾
  [attribute $= value]

十二、通配符选择

• 格式：

  *{
      属性：值
   }
  

十三、伪元素选择器

1、伪元素选择器作用就是给指定标签的内容的前面或者后面添加一个子元素

• 格式：

  1、 标签名称：before{
    content： 内容
  }
  2、标签名称：after{
  
  }