doubleyong
管理员
管理员
  • 最后登录2024-03-15
  • 发帖数1164
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:5224回复:0

CSS3提供的各种选择器 — 让代码更简洁

楼主#
更多 发布于:2016-03-31 17:22
CSS3选择器:
    CSS3字符串匹配属性选择器:
        元素名[属性="值"] , 全匹配
        元素名[属性^="值"],  表示以“值”开头的元素
        元素名[属性$="值"],  表示以“值”结尾的元素
        元素名[属性*="值"],  表示匹配包含“值”的元素

    目标伪类选择器:
          选择器[type="chekcbox"]:checked{ }   //选中状态下的样式设置
          选择器[type="text"]:disabled{ }   //禁用状态下的样式设置
          选择器[type="text"]:read-only{ }   //只读状态下的样式设置
          not伪选择器: #div:not(){ }  //只要不是(可以跟任何条件)都会被选中

    结构性伪类选择器:  
           原理: 必须以父类为选择基准,并且符合以下两个要求:
                       1. 必须是指定元素
                       2. 必须是该父元素下所指定的位置(会考虑Body内所有的元素)
          父选择器  p :nth-child(2)   /* 第二个子元素 且元素为P */
          父选择器   p: first-child{ }  /* 第一个子元素 且元素 为p */
          父选择器  p: last-child{ }  /* 最一个子元素 且 元素为p */    


          原理: 必须以父类为选择基准,该父元素指定位置的该元素排序,与其他元素无关
         父选择器  p:nth-of-type(2) /* 第二个标签为P 的子元素 */
         父选择器  p:nth-last-of-type(2) /* 倒数第二标签为P 的子元素 */
         父选择器  i: only-child{ } /* 当父元素内,有且仅有唯一的指定元素的时候才有用 */
     兄弟素选择器
        #p3~span{ }  /*指定元素之后的所有相同标签的弟弟元素被选中*/
        #p3+span {} /*指定元素的相邻弟弟元素,且为span*/

       子选择选择器  /* 子选择器,只能一级级的找,不能跨代 */
             #div1>p  /*指定元素的子元素为P的,不能跨代*/
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号