zoukankan      html  css  js  c++  java
  • CSS3新增属性(1)

    CSS3新增属性(1)

    一、CSS3属性选择器

    E[attr] ----- button["disabled"] 选择具有attr 属性的E元素

    E[attr="XX"] ----- input[type="text"] 选择具有attr 属性且属性值等于XX的E元素

    E[attr^="XX"] ----- input[type^="text"] 选择具有attr 属性且属性值以XX开头的E元素

    E[attr$="XX"] ----- input[type$="text"] 选择具有attr 属性且属性值以XX结尾的E元素

    E[attr*="XX"] ------ input[type*="text"] 选择具有attr 属性且属性值包含XX的E元素

    tip:权重10

     

     

    二、CSS3结构伪类选择器 

    ul li :first-child{}   选择ul 下的第一个li 标签

    ul li :last-child{}   选择ul 下的最后一个li 标签

    ul li :nth-child(n) {}   选择ul 下的第 n 个li标签 (n从0 开始)

    当n 可以为一个数字也可以是关键词 -- even 、odd (表格的隔行变色)

    当n 为 2n 时等同 even 、当n 为 2n+1时等同odd

    当n 为 5n 时选择5的倍数下的li元素

    当n 为 n+3 时选择第 3 个之后的所有li元素

    当n 为 -n+3 时选择前3个 li元素

    div span:first-of-type{}   选择span类型的第一个元素

    div span:first-of-type{}   选择span类型的最后一个元素

    div span:nth-of-type(n){}   选择span类型的第n个元素

    tip: 权重为10

     

     

    三、CSS3伪元素选择器

    ::before 在元素内部的前面插入内容

    ::after 在元素内部的后面插入元素

    tip:

    before 和 after 必须有 content 属性

    before 在内容的前面,after 在内容的后面

    before 和 after 创建一个元素,但是属于行内元素(没有大小)----> {display:block'} or{display:inline-block'} 行内块

    before 和 after 里面看不见刚才创建的元素,所以我们称为伪元素

    伪元素 和 标签选择器一样,权重为 1

      

    博客只用于记录自己学习的东西,如有错误感谢留言斧正哦!

  • 相关阅读:
    网页使用思源字体 CSS
    不用軟體解PPT密碼
    服务端性能测试校准v1.2
    开发语言性能对比,C++、Java、Python、LUA、TCC
    数值溢出测试工具,协议测试专用
    真人算法演示
    Visual Studio并发Qpar优化效果
    服务端性能测试工具校验v1.1
    IOCP和WSA异步协同客户端版
    服务端性能测试工具校验v1.0
  • 原文地址:https://www.cnblogs.com/ruiannan/p/11879354.html
Copyright © 2011-2022 走看看