CSS之选择器相关

基础选择器相关

• 通用选择器
• 元素选择器
• 类选择器
  
  • 注意: 类名不能以数字开头
• 分类选择器
  
  • 如: div.waring{}
• id选择器
• 群组选择器
• 后代选择器
• 子代选择器

复杂选择器相关

• 兄弟选择器
  
  • 相邻兄弟选择器
    
    • 如div+p{}
    • 注意: 只找与当前元素相关的后面的一个紧挨着他的兄弟元素, 如何符合则匹配, 不符合也不会向下查找
  • 通用兄弟选择器
    
    • 如div~p{}
    • 注意: 第二个元素不必紧紧跟随在第一个元素后面, 该选择器匹配到的元素为一个或多个
• 属性选择器
  
  • 语法
    
    • [属性]
      
      • 匹配带有指定属性的元素
      • [title]: 匹配包含title属性的所有元素
    • 元素[属性]
    • 元素[属性1][属性2]
      
      • 匹配既具备属性1又具备属性2的元素
    • 元素[属性名=属性值]
      
      • 属性名必须等且只等于属性值, 空格也不允许
    • 元素[属性名~=属性值]
      
      • 属性值中只要包含当前值即可匹配
    • 元素[属性名^=值]
      
      • 属性值以值开头的元素
    • 元素[属性名*=值]
      
      • 属性值中包含值的元素
    • 元素[属性名$=值]
      
      • 属性值中以值结尾的元素
  • 须知: 上述语法中, 属性值以单词为基本单元, 值以单个字符为基本单元
    

html代码
<div class="tdiv ">div1</div>
<div class="tdiv mm">div2</div>
<div class="tdiv nn">div3</div>
css代码
div[class~=’mm’]可匹配div2
div[class^=’t’]可全部匹配
div[class*=’n’]可匹配div3
div[class$=’n’]可匹配div3

伪类选择器

• 伪类分类
  
  • 链接伪类
    
    • :link 尚未访问的链接
    • :visited 已访问的链接
  • 动态伪类
    
    • :hover 鼠标悬停时
    • :active 元素被激活时
    • :focus 元素获取焦点时(多用于文本框, 密码框等表单元素)
  • 目标伪类
    
    • :target 用于匹配当前活动的锚点元素(而非链接元素)
  • 元素状态伪类
    
    • :enabled 匹配每个已启用的元素
    • :disabled 匹配每个被禁用的元素
    • :checked 匹配每个已被选中的input元素(单选按钮、复选框)
  • 结构伪类
    
    • :first-child 匹配属于其父元素的首个子元素
    • :last-child 匹配属于其父元素的最后一个子元素
    • :empty 匹配没有子元素的元素(包含文本)
    • :only-child 匹配是其父元素唯一子元素的元素
  • 否定伪类
    
    • 匹配非指定选择器的每个元素
    • :not(selector)

伪元素选择器

• :first-letter 用于选取指定元素的首字母
• :first-line 用于选取指定元素的首行文本
• ::selection 用于匹配被用户选取的部分
• :before 用于在元素前做内容生成
• :after 用于在元素后做内容生成
  内容生成伪元素必须与content属性联用
  div:after{
  content: ”;
  display: block;
  clear: both;
  }