0
点赞
收藏
分享

微信扫一扫

css的基础选择器

JakietYu 2022-04-05 阅读 22
css

集合选择器

  • div.red

并集选择器

  • h1,span
    • 选择多个选择器

关系选择器

  • 父元素

  • 子元素

  • 祖先元素

  • 后代元素

  • 兄弟元素

  • 子元素选择器

    • 父元素>子元素
      • div > span:选择div的子元素span
  • 后代选择器

    • 祖先 后代
      • div span: 选择div的后代元素span
  • 下一个兄弟选择器

    • 前一个 + 下一个
      • p + span
  • 下边所有兄弟选择器

    • 兄~弟

属性选择器

  • <p title="abc">1</p>
    <p title="abcd">2</p>
    <p title="hello">3</p>
    <p title="111">4</p>
    <p></p>
    
  • [属性名]选择含有指定属性的元素

    • p[titlle]
  • [属性名=属性值]选择含有指定属性和属性值的元素

    • p[title=abc]
  • [属性名^=属性值]选择含有指定属性和属性值开头的元素

    • p[title^=abc]
  • [属性名$=属性值]选择含有指定属性和属性值结尾的元素

  • [属性名*=属性值]选择含有指定属性和某属性值的元素

伪类选择器

  • 伪类用来描述一个元素的特殊状态
    • 比如第一个元素,被点击的…
    • 伪类一般情况是:开头
      • :first-child 第一个子元素
      • :last-child 最后一个子元素
      • :nth-child() 选择第n个子元素
        • 特殊值
          • 0~正无穷个选择
          • 2n 选中o数位
          • 2n+1 选择奇数位 odd
          • even o数位
      • 依照所有的元素进行排序
      • :first-of-type
      • :last-of -type
      • :nth-of-type()
        • 这几个伪类的功能和上面的类似,不同点是在同类型排序
      • not() 否定伪类
        • 将符合条件的元素在选择器中去除
          • ul > li:not(:nth-child(3))
举报

相关推荐

0 条评论