• CSS3--选择器


    子元素选择器:

      div>p{background:yellow;}

    相邻的后兄弟选择器(必须相邻)

      h1+p{padding-top:20px;}

    后兄弟选择器(同级的当前元素后面的元素)

      div~p{color:red;}

    属性选择器:(属性可以自己定义,例如:class=abc)

      [abc=value] 属性值为value的元素

      [abc~="value1"]属性值包含value1的元素(多个值之间用空格区分)

      [abc*="val"]模糊匹配 属性值中包含val的元素

      [abc^="val"]匹配属性值以val开头

      [abc$="val"]匹配属性值以val结尾

      [abc=val]属性值为val的元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>css3选择器 | 属性选择器</title>
      <style type="text/css">
        /*li { border: 1px solid red; }*/
        /*li.active { border: 1px solid red; }*/
        /*li[class] { border: 1px solid red; }*/
        /*li[class='active'] { border: 1px solid red; }*/
        /*li[class='active clear'] { border: 1px solid red; }*/
        /*li[class~='active'] { border: 1px solid red; }*/
        /*li[abc] { border: 1px solid red; }*/
        /*li[abc~='d'] { border: 1px solid red; }*/
        li[class*='c'] { border: 1px solid red; }
        /*li[class^='act'] { border: 1px solid red; }*/
        /*li[class$='ve'] { border: 1px solid red; }*/
       /* li[class|='act'] { border: 1px solid red; }*/
      </style>
    </head>
    <body>
     
      <ul class="list">
        <li>
          <h2>第一级菜单</h2>
          <ul>
            <li>
              <h2>第二级菜单</h2>
            </li>
            <li class="act">
              <h2>第二级菜单</h2>
            </li>
            <li>
              <h2>第二级菜单</h2>
            </li>
            <li class="act focus">
              <h2>第二级菜单</h2>
            </li>
            <li>
              <h2>第二级菜单</h2>
            </li>
          </ul>
        </li>
        <li abc="d f"><h2>第一级菜单</h2></li>
        <li class="clear active"><h2>第一级菜单</h2></li>
        <li><h2>第一级菜单</h2></li>
        <li class="abc"><h2>第一级菜单</h2></li>
      </ul>

    </body>
    </html>

    伪类选择器:

      input:disabled

      a:hover/:active/a:visited/a:link

      :before/:after

      :nth-child(n)第n个元素(p:nth-child,限制标签名)

      :nth-last-child(n)倒数第n个元素(p:nth-last-child)

      :nth-of-type(n)所有符合选择器要求的第n个元素

      :nth-last-of-type()同上,倒序

      :first-child/:last-child第一个/最后一个子元素

      p:first-child第一个子元素并且标签名必须为p

      p:last-child最后一个子元素,并且标签名必须为p

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>伪类选择器</title>
      <style type="text/css">
        /*body { background: pink; }*/
        /*:nth-child(2) {
          border: 1px solid #333;
        }

        div :nth-child(3){
          color: green;
        }*/

        /*div:nth-child(3){
          color: green;
        }*/

        /*div p:nth-child(2){
           div 的第二个子标签,并且标签类型为 p标签的元素
          color: green;
        }*/

        /*:first-child {
          font-size: 20px;
        }*/

        /*p:first-child {
          font-size: 20px;
        }*/
        /*div :first-child {
          font-size: 30px; color: red;
        }*/

    /*   :nth-child(3) {
          color: red; font-size: 20px;
        }*/

       /*:nth-of-type(3) {
          color: red; font-size: 20px;
        }*/

        .div1 :nth-child(odd) {
          color: red;
        }

        /*#div1 .div2*/

        /*
          伪类选择器:

        */
      </style>
    </head>
    <body>

      <div class="div1">
        <h2>fdsafafafaf</h2>
        <p>123131231</p>
        <div>fdsf123131313</div>
        <h2>fdsafafafaf</h2>
        <p>123131231</p>
        <div>
          <span>fdsf123131313</span>
          <p>fsafaffafaf</p>
          <div>123131313</div>
        </div>
        <h2>fdsafafafaf</h2>
        <p>123131231</p>
        <div>fdsf123131313</div>
      </div>
     
      <div class="div2">
        <h2>fdsafafafaf</h2>
        <p>123131231</p>
        <div>fdsf123131313</div>
        <h2>fdsafafafaf</h2>
        <p>123131231</p>
        <div>
          <span>fdsf123131313</span>
          <p>fsafaffafaf</p>
          <div>123131313</div>
        </div>
        <h2>fdsafafafaf</h2>
        <p>123131231</p>
        <div>fdsf123131313</div>
      </div>
     
    </body>
    </html>

  • 相关阅读:
    -Dmaven.test.skip=true 和 -DskipTests
    mysql 生成指定范围随机数
    Delphi 6 保存窗体设置
    Sql server left join,right join和inner join的比较
    Mysql配置文件my.ini详解
    网络游戏MMORPG服务器架构
    彻底删除SVN版本库中部分文件或文件夹
    高负载高并发应用 参考索引 地址
    Linux计划任务入门详解
    Linux下SVN的三种备份方式
  • 原文地址:https://www.cnblogs.com/llz1314/p/5738595.html
走看看 - 开发者的网上家园