标签选择器

• p {font-style：normal；font-weight：700；font-size：14px；font-family：”mcrosoft yahei”}

• 选取所有p标签的文本；正常字体，不倾斜；字体宽度加粗；字体大小，14像素；字体格式微软雅黑；

  • font-style 字体风格

    • italic 斜体
    • normal 正常（默认值）

  • font-weight 字体宽度

    • 取值范围 0-900
    • 400 normal（默认值）
    • 700 bold
      • 即加粗

  - font-size    字体大小
     - 单位为像素 px
  - font-family    字体样式
     - 微软雅黑、宋体，可以写中文
     - 英文中间带有空格的，需要引号包裹

• 简写 p {font: italic 400 14px “宋体”}
  • font-style和font-weight可以省略，但是font-size和font-family需要

类选择器

• .red {color：red；}

这是一个段落

• 通过class属性来选择标签，css在英文状态下的点就代表选取class属性，并且值为red的类
• class类可以多标签使用

id选择器

• green {color：green；}

• 选取id=”green” 的标签，颜色为绿色
• id是唯一的，和class的区别就像是，姓名和身份证号，class可以重名，但是身份证号是唯一的

伪类选择器

• 链接伪类 选择器

  • :link 未点击的链接
  • :visited 已点击的链接
  • :hover 经过的链接
  • :active 活动的链接
    • a:hover {color：orange；} 经过链接时显示为橙色
    • a:active {color：red；} 鼠标点击不放的时候显示为红色

• 目标伪类选择器

  • :target {} 选取活动的标签

• 结构伪类 选择器

  • p:first-child {color: red;} 选取第一个p标签为红色
  • p:last-child {color: red;} 选取最后一个p标签为红色
  • p:nth-child(3) {color: red;} 选取第3个p标签为红色
  • p:nth-child(2n) {color: red;} 选取第2n个p标签为红色 即所有偶数个p标签
  • p:nth-child(2n+1) {color: red;} 选取第2n+1个p标签为红色 即所有奇数个p标签