首页 > 技术文章 > CSS基础知识——选择器

fengshi1988 2016-02-03 18:00 原文

选择器#

  • 元素选择器#

    • 文档元素为最基本的选择器
    • 例子:div{属性:值};
  • 选择器分组

    • 例子:h2,p{属性:值}; 表示符合这两种规则的元素设置相同的属性值
  • 通配选择器

      • 表示所有元素
  • 类选择器
    - 应用样式而不考虑具体涉及的元素 只需要在元素中设置class属性。例如:.header{属性:值}
    - 多类选择器 .header .info{属性:值}

  • Id选择器
    - 根据元素的ID设置样式属性值 例如:#divId2{属性:值}

  • 属性选择器
    - 根据元素的属性值,来选择元素: 例如: a[href][title]{属性:值}
    - 根据具体的属性值来选择元素,例如:intput[type="text"]{属性:值}
    - 根据部分属性值选择,例如:
    - “^ ” 表示以什么开头 例如:div[class^="cloud"]{属性:值}
    - “$” 表示以什么结尾 例如:div[class$="cloud"]{属性:值}
    - “” 表示含有什么元素 例如:div[class="cloud"]{属性:值}

  • 后代选择器
    - 表示后代中含有的元素,例如:div p{属性:值},表示div中所有p元素
    - 选择子元素,例如:div>p 表示div中的直接子元素为p的元素

  • 伪类选择器
    - 连接伪类 :link 表示未访问的地址,:visited 表示已访问地址
    - 动态伪类 :focus 表示当前拥有输入焦点的元素 :hover 表示指针停留在哪个元素上 :active 激活某元素

  • 伪元素选择器
    - :first-letter 首个字母 :first-line 首行
    - :before 在元素前 :after 在元素后 例如: div:after{content:"test"}

推荐阅读