• 选择器


    选择器
         简单选择器
         伪元素选择器
         组合选择器
     
    标签选择器
         p{color:blue;}
     
    类选择器
         .special{color:blue;}
    多个组合
    .className
    - .
    - 字母,数字,-,_
    - className必须以字母开头
    - 区分大小写
    - 出现多次
     
    id选择器
         #ban {color:blue;}
    #id
    - #
    - 字母,数字,-,_
    -id必须以字母开头
    -区分大小写
    -只出现一次
     
    通配符选择器
    *{color}
    所有的元素
     
    属性选择器
    <input disabled type=“text” value=“张三”>
    [disabled]{background-color:#eee;}
     
    属性选择器 - [att=val]
    [type=button]{color:blue;}
    id选择器,类选择器就是属性选择器的特例#nav{} = [id=nav]{}
     
    属性选择器 - [att ~= val]
    <h2 class=“title sports”>title</h2>
    <p class=“sports”>content</p>
    [class~=sports]{color:blue}
    类似于模糊匹配 空格之间使用模糊匹配
     
    属性选择器 - [att |= val]
    <p lang=“en”>hello</p>
    <p lang=“en-us”>greeting!</p>
    [lang |= en] { }
    全文的模糊匹配
     
    属性选择器 - [att ^= val]
    [href ^= “#”] { }
    以什么开头的
     
    属性选择器 - [att $= val]
    以什么结尾的
     
    属性选择器 - [att *= val]
    包含什么值
     
    伪类选择器
    a:link {}
    a:visited {}
    a:hover {}
    a:active {}
     
    enabled
    disabled
    checked
     
    伪类选择器
    li:first-child{}
    li:last-child{}
    li:nth-child(type){}  type : even、odd、3n+1
    li:nth-last-child(type){}
     
    :only-child{}
     
    :first-of-type{}  //第一个这种类型的元素
    :last-of-type{}  //
    :nth-of-type(type){}
    :nth-last-of-type(type){}
     
    :only-of-type{}
     
    :empty   选择没有子元素的标签
    :root    跟标签
    :not() 不包含
    :target 锚点
    :lang() language的值
     
    简单选择器
    tag{}
    .className{}
    #id{}
    *{}
    [att]{}
    :link{}
    组合选择器
    将简单选择器进行组合
    img[src$=jpg]{}
     
     
    其他选择器
    伪元素选择器
    ::first-letter{}
    内容的第一个字符变大
     
    ::first-line{}
     
    ::before{
         content:’before’;
    }
     
    ::after{
         content:’after’;
    }
     
     
    ::selection{
         color:red;
         background-color:#ccc;
    }
     
    组合选择器
    后代选择器子代选择权
    .main h2{}
    .main>h2{}
    兄弟选择器
    h2+p{}
    选中了h2和p
    通用兄弟选择器
    h2~p{}
    h2和之后的p
    选择器分组
    h1,h2,h3{}
     
    继承
    body{
         font-family:””;
    }
    继承属性
    - color
    - font
    - text-align
    - list-style
    - ...
    自动继承
     
    非继承属性
    - background
    - border
    - position
    - ...
     
    在文档中如何查看该属性是否是可以继承
    在文档中有一个inherited属性,看是否是yes还是no
     
    CSS优先级
    计算方法
    - a = 行内样式 (1000)
    - b = ID选择器的数量 (100)
    - c = 类、伪类和属性选择器的数量 (10)
    - d = 标签选择器和伪元素选择器的数量 (1)
     
     
    选择器 a b c d value
    h1 0 0 0 1 1
    p > em 0 0 0 2 2
    style:”" 1 0 0 0 1000
    .comment p 0 0 1 1 11
    div#content 0 1 0 1 101
    a:link 0 0 1 1 11
     
     
    CSS层叠
    相同的属性会覆盖
    - 优先级
    - 后面覆盖前面
    不同的属性会合并
     
    CSS改变优先级
    - 改变先后顺序
    - 提升选择器优先级
    - !important
         color: blue !important;
     
    个人认为:提升选择器优先级是最好的改变优先级的方法
     
    选择器兼容性说明:
    本节中所讲的选择器,主流的浏览器基本都支持,IE低版本有较多的兼容问题,具体可查看该页面。http://www.quirksmode.org/css/selectors/
     
     
     
    所有文章如需转载请与我联系!邮箱地址shanchao@qq.com 随笔有任何问题都可以在下面评论,我会及时的回复。 如有如何文章侵权问题,我会做删除处理。
  • 相关阅读:
    nodejs windows下安装运行
    第一篇博客
    vc 动态链接库编程2
    vc 动态链接库编程
    原生js实现图片在线预览
    玩转 css3
    CSS Hack整理
    PHP stdClass Object转array
    aptana studio3 汉化方法
    玩转 css3 续
  • 原文地址:https://www.cnblogs.com/KuckBoy-shan/p/5727644.html
Copyright © 2020-2023  润新知