• css3复杂选择器


    今天antd表格设置样式 ,被教育了一番,上来第一感觉这样式咋搞啊,一脸懵逼,还是css 掌握不牢固,今天记下css3复杂选择器。

    1.相邻兄弟选择器

           P+b : 同一个父元素下p标签后面的第一个兄弟元素b;

     2.通用兄弟选择器

           p~b : 同一个父元素下p标签后面的所有兄弟元素b;

    3.属性选择器

           将元素属性用于选择器中,从而获取指定元素属性或者值得元素;

           语法:

           [属性] : 匹配 "指定属性" 的 "所有" 元素;

           元素[属性] : 匹配 "指定属性" 的 "指定" 元素;

                  input[type] : 获取具备type属性的input;

                  input[id]   : 获取具备id属性的input;

           元素[属性][属性] :匹配 "多个指定属性" 的 "指定" 元素;

           元素[属性="值"] :匹配 "指定属性等于值" 的 "指定" 元素;

           元素[属性~="值"] : 匹配 "指定属性中包含这个值(独立的单词)" 的 "指定" 元素;

           元素[属性^="值"] : 匹配 "指定属性以指定值开始" 的 "指定" 元素;

           元素[属性*="值"] : 匹配 "指定属性包含值(可以是非独立的单词)" 的 "指定" 元素;

           元素[属性$="值"] : 匹配 "指定属性以指定值结束" 的 "指定" 元素;

           元素[属性!="值"] : 匹配 "指定属性不等于值" 的 "指定" 元素;

                        

    4.目标伪类

           活动的HTML锚点,用于选取当前活动的目标元素;

           语法:

           :target 匹配所有活动锚点

           元素:target 匹配指定元素活动锚点

     

    5.元素状态伪类

           主要匹配元素的禁用,启用,选中状态

           多数用在表单元素上;

           :disabled  匹配所有被禁用的元素

           :enabled  匹配所有被启用的元素

           :checked  匹配所有被选中的元素  用于单选和复选;

     

    6.结构伪类

           从元素结构(层级结构)上进行划分;

           用于:找 第一个子元素,最后一个子元素,没有子元素,仅仅包含一个子元素

     

           :first-child      匹配父元素的第一个子元素

           :last-child       匹配父元素的最后一个子元素

           :empty           匹配没有子元素的元素

           :only-child      匹配只有一个子元素的元素

           ul > li:nth-child(2n+1) {do something} //用来选取ul中的第2n+1(奇数)个li元素

           E:nth-of-type()只计算父元素中指定的某种类型的子元素,当某个元素的子元素类型不只是一种时,使用nth-of-type来选择会比较有用。

       E:nth-last-of-type()的用法同E:nth-of-type()相同,不同的是:nth-last-of-type()也是从父元素的最后一个子元素开始算起。

       li:nth-of-type(3)的话就会标识它只会选择第三个li元素,别的元素会忽略掉

     

    7.否定伪类

           input:not([type="text"]){color:red;}

           input:not(:last-child){background:blue;}

     

    8.伪元素选择器

           :first-letter 选取指定选择器的首字符;

                  p:first-letter{

                         font-size:40px;

                  }

                  一帮用于排版,首字符突出等;

     

           :first-line 选取指定选择器的首行字符;

     

           ::selection 匹配用户的选取部分;

                  如 选中的文本等

           ::selection{background:#ccc;color:red} //这样改写后我们选中的文本背景颜色和文字颜色就可以自定义了,但是需要注意的是,::selection仅接受两个属性,一个是background,一个是color。

    转载自:https://www.baidu.com/link?url=kB4JcLHvN_xS3XmpYcH9m_cfNyJ3aZVckGBqtizNartEbDP455uEPvd_nN6z3flixcgwfULBiPO485xxAopQ0K&wd=&eqid=8c48f9540001634e000000035f20e5d6

  • 相关阅读:
    [OpenWRT]判断WDS是否开启
    【cocos2d-js官方文档】一、搭建 Cocos2d-JS 开发环境
    noi Big String 超级字符串
    序列 xulie (2017青岛)
    %%%城市交通费 city //程序超时
    3.密码pasuwado————记第一次超越Candy?
    图论-欧拉回路(邻接链表)
    blue and red ball
    魔方→︿←
    The first DP!
  • 原文地址:https://www.cnblogs.com/xiaoyaoweb/p/13395959.html
Copyright © 2020-2023  润新知