zoukankan      html  css  js  c++  java
  • css3选择器总结

    一、基本选择器

    1、通配符选择器    *{marigin: 0;  padding0;  }

    2、类名选择器           (1)选择指定 class 属性值为“class”的任意类型的任意多个元素。比如下面给使用了 important 这个类名的元素设置样式。

                                          (2)类选择器还可以结合元素选择器来使用。比如我们有好多个元素使用了类名“items”,但如果只想对使用这个类名的 p 元素上修改样式那么可以这么写:p.items {  colorred;  }

    3、标签选择器             用于选择指定类型的 HTML 元素,如 div、ul、li 等。

    4、id 选择器              选择指定 ID 属性值为“id”的任意类型元素。比如下面选择了 id 为"first"的元素。

    二  、层级选择器

    1、子代选择器 (E>F) 

    2、后代选择器 (E F )

    3、交集选择器  (E.F)

    4、并集选择器  (E,F)

    三、属性选择器

    [attribute]

    [target]

    选择所有带有target属性元素

    2

    [attribute=value]

    [target=-blank]

    选择所有使用target="-blank"的元素

    2

    [attribute^=value]

    a[src^="https"]

    选择每一个src属性的值以"https"开头的元素

    3

    [attribute$=value]

    a[src$=".pdf"]

    选择每一个src属性的值以".pdf"结尾的元素

    3

    [attribute*=value]

    a[src*="runoob"]

    选择每一个src属性的值包含子字符串"runoob"的元素

     
    <style>
            [class] {
                 100px;
                height: 60px;
                background: aquamarine;
            }
            [class = "box1"] {
                background: hotpink;
                line-height: 60px;
            }
            [class ^= "b"] {
                border-radius: 20px;
            }
            [href $= "m"] {
                background: chartreuse;
            }
            [class *= "o"] {
                font: 20px;
                color: #00ffff;
            }
         </style>
    </head>
    <body>
        <div class="box1">我是div1</div>
        <button class="btn">点我点我</button>
        <a href="https://www.baidu.com" target="_self">百度</a>
        <a href="https://www.淘宝.com" target="_blank">淘宝</a>
        <div class="outer">haohaoxuexi</div>
    </body>
    

      四、伪类选择器

    :nth-child(n)

    p:nth-child(2)

    选择每个p元素是其父级的第二个子元素

    3

    :nth-last-child(n)

    p:nth-last-child(2)

    选择每个p元素的是其父级的第二个子元素,从最后一个子项计数

    3

    :nth-of-type(n)

    p:nth-of-type(2)

    选择每个p元素是其父级的第二个p元素

    3

    :nth-last-of-type(n)

    p:nth-last-of-type(2)

    选择每个p元素的是其父级的第二个p元素,从最后一个子项计数

    3

    :last-child

    p:last-child

    指定只有选择每个p元素是其父级的最后一个子级。

    :first-child

    p:first-child

    指定只有当<p>元素是其父级的第一个子级的样式

       /* 第三个是li 的话显示样式 */
            ul li:nth-child(3) {
                background: chartreuse;
            }
            /* 从后往前 */
            ul li:nth-last-child(2){
                color: magenta;
            }
            /* 只会验证li标签 其他的不管 */
            ul li:nth-of-type(3) {
                background: #ff00ff;
            }
            /* 会验证第一个是不是li标签 */
            ul li:first-child {
                color: lime;
            }
    

      

    四、动态伪类选择器

    之所以称为动态伪类,因为这些伪类并不存在于 HTML 中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含如下两种:
    • 一种是我们在链接中常看到的锚点伪类,如":link",":visited"
    • 另一种被称作用户行为伪类,如“:hover”,":active"和":focus"
     

    1,使用锚点伪类设置链接样式

    要特别注意这四个锚点伪类的设置,他们是有先后顺序的。要让他们遵守一个爱恨原则 LoVe/HAte,也就是 Link--visited--hover--active。如果把顺序搞错了会样式就会出现问题。
    1
    2
    3
    4
    a:link {color:gray;} /*链接没有被访问时前景色为灰色*/
    a:visited{color:yellow;} /*链接被访问过后前景色为黄色*/
    a:hover{color:green;} /*鼠标悬浮在链接上时前景色为绿色*/
    a:active{color:blue;} /*鼠标点中激活链接那一下前景色为蓝色*/

    2,使用用户行为伪类设置按钮样式

    原文:CSS3 - 属性选择器使用详解(附样例)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>hangge.com</title>
      <style>
        .form-submit {
          transition: border-color 0.218s ease 0s;
          backgroundnone repeat scroll 0 0 #F5F5F5;
          border1px solid #DCDCDC;
          border-radius: 2px 2px 2px 2px;
          color#333333;
          font11px/27px arial,sans-serif;
          height27px;
          padding0 8px;
          text-aligncenter;
          text-shadow0 1px 0 rgba(0000.1);
        }
     
        .form-submit:hover {
          background-color#F8F8F8;
          border-color#C6C6C6;
          box-shadow: 0 1px 2px rgba(0000.15);
          color#333333;
        }
     
        .form-submit:active {
          border-color#4D90FE;
          box-shadow: 0 1px 2px rgba(0000.3inset;
          color#000000;
        }
     
        .form-submit:focus {
          border1px solid #4D90FE !important;
        }
      </style>
    </head>
    <body>
      <button class="form-submit">hangge.com</button>
    </body>
    </html>

    五、UI元素状态伪类选择器

    我们把":enabled",":disabled",":checked"伪类称为 UI 元素状态伪类,这些主要是针对于 HTML 中的 Form 元素操作,比如:
    • <input type="text"/> 有 enable 和 disabled 两种状态,前者为可写状态后者为不可写状态
    • <input type="radio"/> 和 <input type="checkbox"/> 有 checked 和 unchecked 两种状态。
    1
    2
    3
    4
    5
    6
    7
    /** 下面对所不可用的文本框设置样式 **/
    input[type="text"]:disabled {
    }
     
    /** 下面对所选中的的复选框设置样式 **/
    input[type="checkbox"]:checked {
    }

    六、结构伪类选择器

    1,E:empty

    选择没有子元素的元素,而且该元素也不包含任何文本节点
    1
    2
    3
    4
    /** 比如有三个段落,其中一个段落什么都没有,完全是空的。想要这个p不显示,可这样写 **/
    p:empty {
      displaynone;
    }

    2,E:first-child

    用来选择某个元素的第一个子元素,与 E:nth-child(1) 等同。
    1
    2
    3
    /** 选择.demo下第一个li子元素  **/
    .demo li:first-child {
    }

    3,E:last-child

    选择是的某个元素的最后一个子元素,与 E:nth-last-child(1) 等同。
    1
    2
    3
    /** 选择.demo下最后一个li子元素  **/
    .demo li:last-child {
    }

    4,E F:nth-child(n)

    选择父元素 E 的第 n 个子元素 F。其中 n 可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1)。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /** 选择.demo下第3个li子元素  **/
    .demo li:nth-child(3) {
    }
     
    /** 选择.demo下所有偶数位置的li子元素(2,4,6...)  **/
    .demo li:nth-child(even) {
    }
     
    /** 选择.demo下第5个位置起的所有li子元素(5,6,7...)  **/
    .demo li:nth-child(n+5) {
    }
     
    /** 选择.demo下前5个li子元素(1,2,3,4,5)  **/
    .demo li:nth-child(-n+5) {
    }
     
    /** 选择.demo下从1起,隔3取1的所有li子元素(1,5,9...)  **/
    .demo li:nth-child(4n+1) {
    }

    5,E F:nth-last-child(n)

    选择父元素 E 的倒数第 n 个子元素 F。此选择器与 E:nth-child(n) 选择器计算顺序刚好相反。
    其中 n 同样可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1)。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /** 选择.demo下倒数第3个li子元素  **/
    .demo li:nth-last-child(3) {
    }
     
    /** 选择.demo下倒数第2个起偶数位置的li子元素(倒数第2个,倒数第4个...)  **/
    .demo li:nth-last-child(even) {
    }
     
    /** 选择.demo下倒数第5个位置起的所有li子元素(倒数第5个,倒数第6个...)  **/
    .demo li:nth-last-child(n+5) {
    }
     
    /** 选择.demo下最后5个li子元素(倒数第1,2,3,4,5)  **/
    .demo li:nth-last-child(-n+5) {
    }
     
    /** 选择.demo下从最后1个起,隔3取1的所有li子元素(倒数第1,5,9...)  **/
    .demo li:nth-last-child(4n+1) {
    }

    6,E:only-child

    选择父元素只包含一个子元素,且该子元素匹配 E 元素。
    1
    2
    3
    /** .demo下只有一个字元素,且该元素为p  **/
    .demo p:only-child {
    }

    7,其他

    • E:first-of-type:类似于 E:fisrt-child,只不过它选择父元素内具有指定类型的第一个 E 元素
    • E:last-of-type:类似于 E:last-child,只不过它选择父元素内具有指定类型的最后一个 E 元素
    • E:nth-of-type(n):类似于 E:nth-child(n),只不过它选择父元素内具有指定类型的第 n 个 E 元素
    • E:nth-last-of-type(n):类似于 E:nth-last-child(n),只不过它选择父元素内具有指定类型的倒数第 n 个 E 元素
    • E:only-of-type:类似于 E:only-child,只不过它选择父元素只包含一个同类型子元素,且该子元素匹配 E 元素
     
    (1)如果父元素下的子元素类型都是一样的,那么上面的 *type 和 *child 选择器使用起来效果是一样的。
    (2)但如果父元素下有各种子元素,那就有区别了。这里以 E:fisrt-child 和 E:first-of-type 做个比较:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /** 匹配不到,因为.demo下第一个元素是p **/
    .demo li:first-child {
      colorred;
    }
     
    /** 可以匹配的到,.demo下派出其他元素,第一个出现li **/
    .demo li:first-of-type {
      colorgreen;
    }
     
    <div class="demo">
      <p>文章列表:</p>
      <li>条目1</li>
      <li>条目2</li>
      <li>条目3</li>
    </div>

    七、否定伪类选择器

    匹配所有除元素 F 外的 E 元素,类似以 jQuery 中的 :not 选择器。
    1
    2
    3
    4
    /** 对form中所有input加边框,但又不想submit也起变化 **/
    input:not([type="submit"]) {
      border1px solid red;
    }

    八、伪元素

    1,::first-line

    选择元素的第一行
    1
    2
    3
    4
    /** 比如说改变每个段落的第一行文本的样式 **/
    p::first-line {
      font-weight:bold;
    }

    2,::first-letter

    选择文本块的第一个字母,除非在同一行里面包含一些其它元素。这个主要运用于段落排版上多。
    1
    2
    3
    4
    5
    6
    /** 首字下沉 **/
    p::first-letter {
      font-size56px;
      float:left;
      margin-right:3px;
    }

    3,::before和::after

    这两个主要用来给元素的前面或后面插入内容。
    (1)这个最常用的便是是清除浮动了,无需再添加一个空的 div 并应用 clear:both; 样式,只需如下样式即可在元素尾部自动清除浮动。
    1
    2
    /** .clearfix元素尾部自动清除 **/
    .clearfix::after {clearboth;}
    (2)与"content"配合使用,可以实现许多特效。比如下面样式,当鼠标移动到链接上方,链接左右会出现悬浮方括号。
    原文:CSS3 - 属性选择器使用详解(附样例)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    a {
      positionrelative;
      display: inline-block;
      outlinenone;
      text-decorationnone;
      font-size16px;
      color#FFF;
      padding5px 15px;
    }
     
    a:hover::before, a:hover::after {
      positionabsolute;
    }
     
    a:hover::before {
      content"5B";
      left-2px;
    }
     
    a:hover::after {
      content"5D";
      right-2px;
    }

    4,::selection

    用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性:一个就是 background,另一个就是 color 属性。
    原文:CSS3 - 属性选择器使用详解(附样例)
    1
    2
    3
    4
    p::selection {
      backgroundred;
      color#fff;
    }
  • 相关阅读:
    ArcMap+ArcCatalog手工新建点层及添加数据
    zedGraph 图表控件总结(一)
    Android 开发学习笔记(五)—— 最简单的注册界面
    repeater实现删除按钮
    repeater分页实例
    FCKeditor的使用说明
    javascript:void(0)是什么意思
    为asp.net控件点击事件添加Confirm()
    LINQ判断素数
    U盘文件不能删除,怎么处理
  • 原文地址:https://www.cnblogs.com/guirong/p/13532245.html
Copyright © 2011-2022 走看看