H5CSS3 Lesson 1 – CSS Selector

 hello, after more than a year, I came back again. In the previous company, because the confidentiality agreement was too strict, I never dared to write a blog. I still miss the blogging life. I will continue to study in the next days .
          Because the H5CSS3 and c language courses are now taken in the junior college, the content written next may be more suitable for beginners, and please advise me if there are any mistakes.

CSS selector

There are many types of selectors in CSS, and some new selectors have been added in CSS3 to make the selectors more powerful, as follows.

`This is relatively simple, no screenshot of the result map

 *{<!-- -->
        padding: 0;
        margin: 0;
      }
      p{<!-- -->
        font-size: 12px;
        color: brown;
      }

 input[value] {<!-- -->
        color: brown;
      }
      input[type="password"] {<!-- -->
        background-color: plum;
      }

 <!-- attribute selector -->
    <input type="text" value="Please enter" />
    <input type="text" />
    <input type="password" name="" id="" />

Result graph:

 

  
    
    
    
    css selector
    
    
  
  
    hello
    1111
    <!-- attribute selector -->
    <input type="text" value="Please enter" />
    <input type="text" />
    <input type="password" name="" id="" />
    
    The most beautiful China
    Who am I
    
    
      hoeing day at noon
    
    ohhDrylands123Drought 2
    
    ohh1Dryland123Dryland 2
    
    1111
    wwww
    1111
    1111

    dddd
    2222
    2222
    2222

The result picture is a bit messy, but it is too troublesome to take screenshots one by one, so let’s take a look

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{<!-- -->
            background-color: beige;
        }
   ::first-line{<!-- -->
    background-color: brown;
}
::first-letter{<!-- -->
    color: blue;
}
h1::before{<!-- -->
    content: "sasasas";
}
h1::after{<!-- -->
    content: "wwwwws";
    color: yellow;
}
.container p:first-child{<!-- -->
font-style: italic;
color: azure;
}
.container p:last-child{<!-- -->
font-style: italic;
color: rgb(18, 94, 94);
}
.container p:only-child{<!-- -->
background-color: blueviolet;
color: rgb(63, 24, 24);
}
.container :only-of-type{<!-- -->
background-color: rgb(212, 65, 151);
color: rgb(134, 16, 16);
}
.container p:nth-of-type(2){<!-- -->
    font-weight: 800;
    color: green;
}
a:link{<!-- -->
    background-color: blue;
}
a:visited{<!-- -->
    background-color: aqua;
}
a:hover{<!-- -->
    background-color: blanchedalmond;
}
a:active{<!-- -->
    background-color: blueviolet;
}
input:checked{<!-- -->
    width: 20px;
    height: 20px;
}
    </style>
</head>
<body>
    <div class="box">
        <p>SASASASASADSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
            sdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </p>
        <p>sasasasasas</p>
        <p>sasasasasas</p>
        <a href="#">fdfdfdfdfdfvf</a>
        <h1>1111</h1>
    </div>
    <div class="container">
        <p>The sun is at the end of the mountain</p>
        <p>Yellow River flows into the sea</p>
        <li>sasas</li>
        <p>Want to travel far and wide</p>
        <p>Take it to the next level</p>
    </div>
    <div class="container">
        <p>The sun is at the end of the mountain</p>
    </div>
    <a href="http://www.baidu.com">111111111111</a>
    <input type="checkbox">
</body>
</html>

Screenshot below:

Quick exercise for this section:

code show as below:

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title>Using selectors</title>
</head>
<style type="text/css">
    /* Set the navigation bar style */
    nav {<!-- -->
        width: 300px
    }

    /* Set the style of each item in the navigation bar */
    li {<!-- -->
        background-color: rgba(0, 0, 0,
                0.4);
        height: 35px;
        line-height: 35px;
        overflow: hidden
    }

    /* Set the background color transparency of even rows to 0.9 */
    li:nth-of-type(2n) {<!-- -->
        background-color: rgba(0, 0, 0, 0.5)
    }

    /* The background color is #0099E5 when the mouse is hovering */
    li:hover {<!-- -->
        background: #0099E5
    }

    /* Set the style of the hyperlink */
    a {<!-- -->
        text-decoration: none;
        display: block;
        color: #fff;
        height: 35px;
        padding: 0 38px
    }
</style>

<body>
    <nav>

        <ul>

            <li>
                <a href="#">JavaEE Tutorial</a>
            </li>

            <li>
                <a href="#">Android Tutorial</a>
            </li>

            <li>
                <a href="#">PHP Tutorial</a>
            </li>

            <li>
                <a href="#">UI Design Tutorial</a>
            </li>

            <li>
                <a href="#">iOS Tutorial</a>
            </li>

            <li>
                <a href="#">Web front-end tutorial</a>
            </li>

            <li>
                <a href="#">C/C++ Tutorial</a>
            </li>
        </ul>
    </nav>
</body>

</html>