css选择器的整理

1：基础选择器

        /* 标签选择器:选中当前页面中所有符合标签 */

        h1 {

            color: rgb(32, 27, 28);

        }

        /* id选择器   #id*/

        #box1 {

            color: rgb(6, 106, 194);

        }

        /* 类选择器   .类名 */

        .box1 {

            background-color: pink;

        }

        /* 通配符选择器  选中所有的元素*/

        * {

            font-size: 60px;

        }

2：包含选择器

/* 子代选择器   只选中亲生儿子 */

        ul>li {

            background-color: pink;

        }

        /* 后代选择器 */

        /* css样式表存在层叠性，后边的会将前边的覆盖掉 */

        ul li {

            background-color: aqua;

        }

        ul div>li {

            background-color: brown;

        }

3：逗号选择器

 div {

            background-color: pink;

        }

        h1 {

            background-color: pink;

        }

        p {

            background-color: pink;

        } 

        /* 复合选择器 */

        div,

        p,

        h1 {

            background-color: aqua;

        }

4：伪类选择器

a:link {

            color: green;

        }

        /* 访问之后的样式 */

        a:visited {

            color: red;

        }

        /* 获取焦点时的样式 */

        a:focus {

            color: blue;

        }

        /* 鼠标悬停时的样式 */

        /*

       +表示下一个

            ~表示之后所有的兄弟元素 */

        a:hover+div {

            color: pink;

        }

        /* active     用户点击之后按住鼠标 */

        a:active {

            background-color: pink;

        }

        div:hover {

            background-color: pink;

        }

5：结构伪类选择器

ul li:nth-child(9) {

            background-color: pink;

        }

        ul li:last-child {

            background-color: red;

        }

        ul li:first-child {

            background-color: aqua;

        }

        ul li:nth-child(2n+1) {

            background-color: blue;

        }

        ul li:nth-child(2n) {

            background-color: rgb(33, 227, 124);

        }

/* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */

        .father .son:nth-child(2) {

            background-color: pink;

        }

        /* 先找.father，再找.father里的.son，然后对.son进行排序 */

        .father .son:nth-of-type(2) {

            background-color: aqua;

        }

6：伪元素选择器

p::before {

            content: "##3#";

            color: pink;

              }

        p::after {

            content: "and you";

            color: red;

                  }

        input::placeholder {

            color: pink;

                         }

        div::selection {

            color: aqua;

                       }