• css3选择器总结


    1.属性选择器

    [attr=val]: 选取attr属性的属性值是val的元素

    例:[type=text]选取type属性值是text的元素

    [attr*=val]:选取attr属性的属性值中包含val字符元素

    例:[class*=sel]选择class属性的属性值包含sel的元素

    [attr^=val]:选取attr属性的属性值开头是val字符开头的元素

    例:[class^=sel]选择class属性的属性值是以sel开头的元素

    [attr$=val]:选取attr属性的属性值是val字符结尾的元素

    例:[src^=jpg]选择src属性的属性值是以jpg结尾的元素

    2.伪元素选择器

    p:first-line 选取段落的第一行

    p:first-letter 选取段落的首字母或第一个字

    p:before 表示在段落之行插入一些内容

    p:after 表示在段落之后插入一些内容

    :root 根元素选择器

    :not 不包含这个元素,例:p:not(a)//a是p元素下面的子结构元素

    :empty 指元素内容为空的时候

    :target 如果某个链接的href设置某个元素的ID时,点击这个链接时,跳转到那个元素后,再会作用这些样式

    3.子选择器

    li:first-child 选中每个ul列表中的第一个li元素

    li:last-child 选中每个ul列表中的最后一个li元素

    li:nth-child(1) 选中每个ul列表中的第一个li元素

    li:nth-last-child(1) 选中每个ul列表中的最后一个li元素

    li:nth-child(odd) 选中每个ul列表中奇数 的li元素

    li:nth-last-child(even)选中每个ul列表中倒数偶数的li元素

    p:nth-of-type(odd)选中p类型的奇数位的元素

    li:nth-child(4n+1) 循环使用样式//4表示每次循环的长度,1表示第1个

    li:only-child 表示只有一个li元素

    4. UI元素状态伪类选择器

    input:hover 鼠标指针移到input框时

    input:active 鼠标在元素上按下还没有松开的时候

    input:focus input框获取焦点时

    input:enabled input处于可用状态时

    input:disabled input处于不可用状态时

    input:read-only 只能读的input框

    input:read-write 处于非只读状态的input框

    input:checked 选中的checkbox和radio框

    input:default 表示页面找开时就被选中的checkbox或input框,哪怕后来将这个选中的框改为非选中状态,该样式也不消失

    p:selection 表示p元素被选中时,该样式生效

    5.通用兄弟元素选择器

    div~p 表示div元素后面兄弟P元素

  • 相关阅读:
    SQLite在iOS开发中的使用
    实现序列化和反序列化
    NSPredicate用于对集合类中的元素进行筛选
    通知中心NSNotification与委托的异同,需要注意的要点
    OC 重写description,isEqual方法
    iOs 单例模式的定义,实现、步骤
    Obejctiv-c 里面KVC 和 KVO的实现步骤,和有关方法
    关于NSTimer的几种构建方式
    NSTimer 实现到一个指定时间(年、月、日)的倒计时
    关于UILable、UIButton、UITextField简单运用
  • 原文地址:https://www.cnblogs.com/xiaohui108/p/3240767.html
Copyright © 2020-2023  润新知