20220714 css语法基础及选择器等

139 阅读2分钟

语义化标签补充:

  1.   thead——表头
  2.   tbody——表体
  3.   tfoot——表尾

单标签与双标签:

  • 单标签:没有闭合标签,不能嵌套子元素
  • 双标签:闭合标签,可以嵌套子元素

css语法基础:

书写位置:

  • 行内式:在元素中直接写css样式(避免出现行内式的写法,因为其整理麻烦)

  • 在head中书写:用style标签写样式(不推荐使用,因为只能看样式或代码,需要翻来翻去,非常麻烦)

  • 外链样式:使用link标签书写样式(常用这种方式书写,因为可以分为两栏,方便观察代码与样式)

选择器:

  • id选择器:#   
  • class选择器:.
  • 标签选择器:直接选择标签(尽量避免使用)
  • 后代选择器:空格
  • 子代选择器:>
  • 并集选择器:,
  • 通配选择器:*(表示选择所有元素)
  • 相邻兄弟选择器:+

伪类选择器:

  • :first-child:选中所有满足条件的第一个元素,且必须是第一个子元素
  • :first-of-type:选中所有满足条件的第一个元素
  • :last-child:选中所有满足条件的最后一个元素,且必须是最后一个子元素
  • :last-of-type:选中所有满足条件的最后一个元素
  • :nth-child(n):取出所有满足条件的第n个元素,且必须是第n个子元素
  • :nth-of-type(n):取出所有满足条件的第n个元素
  • :not(其他选择器):选择处理括号里的元素,括号中不能写数字,要写上面那些选择器
  • :visited:给访问过的超链接设置颜色(历史记录中有的)
  • :link:给未访问过的超链接设置颜色(历史记录中没有的)
  • :active:设置鼠标按下,未松开时的颜色
  • :hover:设置鼠标移入时的颜色,移出就是原来的颜色

虎哥小知识:

在快速施法写代码,#或class表示id或类名字,可只写#或.号,其默认表示为div标签