第十二章 css3的新增选择器

css3新增的选择器

• 属性选择器 权重和class选择器一样 为10 方括号前面可以加标签名，限制元素
  • [属性名]{} 属性名可以是自定义属性
  • [属性名=“属性值”] 属性名和属性值匹配
  • [属性名^=“值”] 属性值以某个值开头
  • [属性名$=“值”] 属性值以某个值结尾
  • [属性名*=“值”] 属性名中包含某个值
• 伪类选择器 权重值和class选择器一样 为10 0010
  • 结构性的伪类
    • child系列
      1. 父元素 子元素:first-child{} 父元素中的第一个孩子必须和该子元素匹配
      2. 父元素 子元素:last-child{} 父元素中的最后一个孩子必须和该子元素匹配
      3. 父元素 子元素:nth-child(n){} 父元素中的第几个孩子必须和该子元素匹配 n可以替换成even(偶数)odd(奇数) 也可以是表达式 2n等 n是自然是从0开始
      4. 父元素 子元素:only-child{} 父元素中只能有该子元素一个孩子
    • type系列
      1. 父元素 子元素:first-of-type{} 这么多子元素中的第一个
      2. 父元素 子元素:last-of-type{} 这么多子元素中的最后一个
      3. 父元素 子元素:nth-of-type(n){} 这么多子元素的第几个子元素
      4. 父元素 子元素:nth-last-of-type(n){} 这么多子元素中倒数第几个元素
  • 目标伪类 元素:target{} 点击跳转到该板块之后样式才生效

      <a href="#box">点击跳到HTML板块</a>
      <div id="box">HTML板块</div>
    

     #box:target {
        background-color: brown;
        color: chartreuse;
        font-size: 40px;
      }
    

  • 状态伪类
    • 可编辑 表单元素:enabled{} eg: input:enabled{}
    • 不可编辑 表单元素:disabled{} eg: input:disabled{}
    • 获取焦点 表单元素:focus{} eg: input:focus{}
    • 选中 单选/多选::checked{} eg: input:checked+span{}
    • 高亮状态 元素::selection{} eg: div::selection{background-color:blue;color:red}
  • 动态伪类(link/visited/hover/active)
• 层级选择器
  • 后代选择器 选择器 选择器{}
  • 子代选择器 选择器>选择器 只能选择的孩子
  • 相邻的后面兄弟 选择器+选择器{}
  • 相邻的后面的兄弟们 选择器~选择器{}

H5新增的语法及标签 ie8及以下不生效

• 新增标签 特点：语义化
  • 头部 header
  • 导航 nav
  • 板块 section
  • 侧边栏 aside
  • 主要内容区域 main
  • 有图文 figure ficaption

      <figure>
          <img src="">
          <figcaption>图片说明</figcaption>
      </figure>
    

  • footer 底部
  • article 文章
  • mark 标记 内联
  • time 时间标签 内联
• 新增的语法
  • 文档声明DOCTYPE可以小写
  • 单标签不写结尾标签
  • 可以省略的结尾标签 li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
  • 可以省略的标签 html、head、body、colgroup、tbody
• 多媒体标签
  • 音频

     <audio src="zy/梦然-少年.mp3" controls autoplay muted loop></audio>
     兼容写法 浏览器从上到下解析支持那种格式就播放哪个
    <video width="800" height="">
        <source src="myvideo.mp4" type="video/mp4"></source>
        <source src="myvideo.ogg" type="video/ogg"></source>
        <source src="myvideo.webm" type="video/webm">
        </source>
    </video>
     controls: 控件
     autoplay: 自动播放 谷歌和火狐不支持
     muted: 静音 静音之后火狐支持自动播放
     loop: 循环
    

  • 视频

       <video src="zy/zyx.mp4" controls autoplay loop poster="zy/7.jpg"></video>
       属性同音频
       autoplay: 静音之后谷歌和火狐都支持自动播放
       poster: 视频没有播放之前显示的图片 
       兼容写法  浏览器从上到下解析支持那种格式就播放哪个
      <audio controls>
        <source src="horse.ogg" type="audio/ogg">
        <source src="horse.mp3" type="audio/mpeg">
      </audio>