第5章 1215-css引入方式与选择器，学习心得、笔记

今天所学心得、笔记

1、css规则的三种引入到html文档中的方式

    <!-- 1、CSS样式引入：内联方式-->
    <div class="d1" style="width: 100px; height: 100px; background-color: violet"></div>
    /*2、CSS样式引入：内部方式*/
    .d2 {
    width: 100px;
    height: 100px;
    background-color: violet;
    }
    <!--3、CSS样式引入：外部方式-->
    <link rel="stylesheet" href="../css/style.css">

---

2、标签选择器

        /*id选择器*/
        #test {
            background-color: violet;
        }
        /*类选择器*/
        .list {
            background-color: lightblue;
        }
        /*并集选择器*/
        #test, .list {
            background-color: red;
        }
        /*后代选择器*/
        ul li {
            background-color: lightcoral;
        }
        /*子代选择器*/
        ul>li {
            background-color: lightcyan;
        }
        /*后面紧相邻一个元素选择*/
        #test + li {
            background-color: lightblue;
        }
        后面所有元素选择
        .list ~ li {
            background-color: lightblue;
        }
        /*选择第一个*/
        ul li:first-of-type {
            background-color: red;
        }
        /*选择最后一个*/
        ul li:last-of-type {
            background-color: red;
        }
        /*选择第三个*/
        ul li:nth-of-type(3) {
            background-color: violet;
        }
        /*选择倒数第三个*/
        ul li:nth-last-of-type(3) {
            background-color: violet;
        }
        /*偶数选择器*/
        ul li:nth-of-type(even) {
            background-color: lightcyan;
        }
        /*奇数选择器*/
        ul li:nth-of-type(odd) {
            background-color: lightcoral;
        }