一、属性选择器

  • Element[attr]只使用属性名,但没有确定任何属性值

    p[cxy]{background: red;color: white;}
  • Element[type="text"]指定属性名,并指定了该属性的属性值

    p[cxy=html]{background: red;color: white;}
    p[cxy='css']{background: red;color: white;}
  • Element[attr~="value"]指定属性名,属性值是一个列表,并且以空格隔开,其中列表中包含了一个value词

    <p cxy='html test'>html</p>
    
    // 包含有html的元素
    p[cxy~=html]{color: yellow;}
    // p[cxy=html]{color: yellow;} 这是获取不到对应元素的
  • Element[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的

    <p cxy='javascript'>javascript</p>
    <p cxy='jquery'>jquery</p>
      
    // 以j开头的元素
    p[cxy^=j]{ color: yellow; }
  • Element[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的

    // 以s结尾的元素
    p[cxy$=s]{ color: blue; }
  • Element[attr*="value"]指定了属性名,并且有属性值,而且属值中包含了value

    // 只要是包含css的元素
    p[cxy*=css]{ color: black; }
  • Element[attr|="value"]指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn)

    // 以'z-'开头的属性,或属性为'z'的元素
    p[cxy|=z]{ color: black;}
    > 案例: 百度文库
    

二、结构性伪类选择器

  • Element:nth-child(n) 表示Element父元素中的第n个字节点

    p:nth-child(odd){background:red}  // 匹配奇数行
    p:nth-child(even){background:red} // 匹配偶数行
    p:nth-child(2n){background:red}  // 偶数
    p:nth-child(1){ background: red;}  // 第一元素
    > p:nth-child(1){ background: red;}指找p标签父级下的第一个子元素,并且这个元素是p标签
    >
    > <body>
    >    <p> 1、星期一 </p>  <!--  p:nth-child(1) -->
    >    <h1> 测试 </h1>    <!-- h1:nth-child(2) -->
    > </body>
    
    
  • Element:nth-last-child(n) 表示Element父元素中的第n个字节点,从后向前计算

    p:nth-last-child(1){ background: red;}  // 最后一个元素
  • Element:nth-of-type(n) 表示Element父元素中类型为Element的第n个字节点

    p:nth-of-type(2){background: red;}  // 找p标签父级下的第二个p
  • Element:nth-last-of-type(n)表示Element父元素中的第n个字节点,且类型为Element,从后向前计算

    p:nth-last-of-type(2){background: red;}  // 找p标签父级下的倒数第二个p
  • Element:first-child 表示Element元素中的第一个子节点

    h1:first-child{ background: red;}  // 等同于p:nth-child(1)
  • Element:last-child 表示Element元素中的最后一个子节点

    h1: last-child{ background: red;}  // 等同于p:nth-last-child(1)
  • Element:first-of-type 表示Element父元素中的第一个子节点且节点类型是Element的

    h1:first-of-type{background: red;}  // 等同于nth-of-type(1)
  • Element:last-of-type 表示Element父元素中的最后一个子节点且节点类型是Element的

    h1:last-of-type{background: red;}  // 等同于nth-last-of-type(1)

三、伪类选择器

  • E:target 表示当前的URL片段的元素类型,这个元素必须是E

    // http://127.0.0.1:8020/test.html#view1
    div:target{ display: block; }  // url中的hash值
  • E:disabled 表示不可点击的表单控件

    input: disabled{color: red;}
  • E:enabled 表示可点击的表单控件

    input: enabled{color: gray;}
  • E:checked 表示已选中的checkbox或radio

    input:checked{ width: 50px; height: 50px; }
    > 案例: 改变单选框/复选框样式
    
  • E:first-line 表示E元素中的第一行

    p:first-line{ color: red; }
  • E:first-letter 表示E元素中的第一个字符

    p:first-letter{font-size: 30px;}
  • E::selection表示E元素在用户选中文字时

    p::selection{ background: red;color: white; }
  • E::before 生成内容在E元素前

    p:before{ content: '你是谁啊?'; display: block;}
  • E::after 生成内容在E元素后

    p: after{ content: '你是谁啊?'; display: block;}
  • E:not(s) 表示E元素中,s元素不被匹配

    // p元素中,元素名为.view2的不被匹配到
    p:not(.view2){ color: blue;}  
  • E~F表示E元素毗邻的F元素(即E元素之后的)

    p~h1{ background: red;}  // p后面的h1元素才生效
  • Content 属性

    p: after{ content: '你是谁啊?'; }

四、子元素选择器

不希望选择任意后代,缩小范围,只选择某个元素的子元素,即可以使用子元素选择器;

  • E1 > E2 表示E1的子元素中所有的E2

    // 即h1子元素的所有strong
    h1 > strong {color:red;}

五、相邻兄弟选择器

  • E1 + E2 表示E1元素后面的E2(E1和E2父元素一致)

    h1 + p {margin-top:50px;}

本文由 zyz 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

楼主残忍的关闭了评论