02-CSS基础与进阶-day1-录像293

时间:2019-06-16
本文章向大家介绍02-CSS基础与进阶-day1-录像293,主要包括02-CSS基础与进阶-day1-录像293使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

03超链接选择器简写.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*相当于a:link的未访问的链接样式*/
        a {
            font-size: 16px;
            font-weight: 700;
            color: gray;
        }
        /* 有:  这种为伪类*/
        /* 鼠标悬停效果*/      
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">秒杀</a>
</body>
</html>

04结构伪类选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*
         li:first-child {
             color: blue;
         }

         li:last-child {
             color: green;
         }

          选择第三个孩子*/
         /*li:nth-child(3) {
             color: yellow;
         }
         */
         /* n 0 1 2   li编号从1开始编号*/
         /* li:nth-child(2n-1) {
             color: skyblue;
         } */
         /* odd奇数
         li:nth-child(odd) {
             font-size: 20px;
         }
            even 偶数
         li:nth-child(even) {
             font-size: 30px;
         }
         */
         /* 倒数*/
         li:nth-last-child(even) {
             color: red;
         }
    </style>
</head>
<body>
    <ul>
        <li>aaaaa</li>
        <li>bbbbbb</li>
        <li>ccccc</li>
        <li>ddddddddd</li>
        <li>eeeeee</li>
        <li>ffffff</li>
    </ul>
</body>
</html>

原文地址:https://www.cnblogs.com/HiJackykun/p/11033082.html