CSS3选择器 -- 笔记 - 图2review0507 child

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>新增子元素选择器</title>
  6.     <style type="text/css">
  7.         section > div + article{
  8.             color: red;
  9.         }
  11.         /*section > div ~ article{
  12.             color: red;
  13.         }*/
  14.     </style>
  15. </head>
  16. <body>
  17.     <section>
  18.         <div>article外面的文字1</div>
  19.         <article>
  20.             <div>article里面的文字1</div>
  21.         </article>
  22.         <article>
  23.             <div>article里面的文字2</div>
  24.         </article>
  25.         <div>article外面的文字2</div>
  26.     </section>
  27. </body>
  28. </html>

review0507 group

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群组选择器</title>
    <style type="text/css">
        section > article,
        section > aside,
        section > div{
            color: red;
            margin-top: 10px;
            background-color: #abcdef;
        }
    </style>
</head>
<body>
    <section>
        <article>article</article>
        <aside>asdie</aside>
        <div>div</div>
    </section>
</body>
</html>

review0507 jiegoulei

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构类</title>
    <style type="text/css">
        /*section > div:first-child{
            color: #f00;
        }*/

        /*section > div:last-child{
            color: #f00;
        }*/

        div:last-child{
            color: #f00;
        }

        ul > li:nth-child(3){
            background-color: #f00;
        }

        ul > li:nth-child(2n){
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <div>0-1</div>
    <div>0-2</div>
    <div>0-3</div>
    <section>
        <div>1-1</div>
        <div>1-2</div>
        <div>1-3</div>
    </section>
    <section>
        <div>2-1</div>
        <div>2-2</div>
        <div>2-3</div>
    </section>
    <hr>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>
</html>

review0507 not

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>否定选择器</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: none;
        }

        a{
            text-decoration: none;
            color: #333;
            font-size: 14px;
            display: block;
            float: left;
            width: 100px;
            height: 30px;
        }

        nav{
            width:800px;
            margin: 0 auto; 
        }

        nav > a:not(:last-of-type){
            border-right: 1px solid red;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">first</a>
        <a href="#">second</a>
        <a href="#">third</a>
        <a href="#">fourth</a>
        <a href="#">fifth</a>
    </nav>
</body>
</html>

review0507 shuxing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        a[href]{
            text-decoration: none;
        }

        a[href="#"]{
            color: #f00;
        }

        a[href~="two"]{
            color: #ff0;
        }

        a[href^="#"]{
            color: #0f0;
        }

        a[href$="#"]{
            color: #00f;
        }

        a[href*="#"]{
            color: pink;
        }

        a[href|=#]{
            color: black;
        }
    </style>
</head>
<body>
    <a href="review0507-3.html">属性1</a>
    <a href="#">属性2</a>
    <a href="#" class="one two">属性3</a>
    <a href="#" class="two three">属性4</a>
    <a href="1#">属性5</a>
    <a href="2#">属性6</a>
    <a href="3#">属性7</a>
    <a href="4#">属性8</a>
    <a href="#1">属性9</a>
    <a href="#2">属性10</a>
    <a href="#3">属性11</a>
    <a href="#4">属性12</a>
    <a href="#-1">属性13</a>
    <a href="#-2">属性14</a>
    <a href="#-3">属性15</a>
    <a href="#-4">属性16</a>
</body>
</html>

review0507 weilei

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style type="text/css">
        a{
            text-decoration: none;
        }

        a:link{
            color: #000;
        }

        a:hover{
            color: #f00;
        }

        a:active{
            color: #ff0;
        }

        a:visited{
            color: #0ff;
        }

        input{
            width: 200px;
            height: 30px;
            border: 5px solid #f00;
        }

        /*input:focus{
            background: #abcdef;
        }*/

        input:disabled{
            background: #abcdef;
            border: 1px solid #ff0;
        }
    </style>
</head>
<body>
    <a href="#">伪类</a><hr>
    <input type="text" name="" disabled="disabled">
    <input type="text" name="">
    <input type="text" name="">
    <input type="text" name="">
</body>
</html>