前端面试之CSS常用的选择器！

前端面试之CSS常用的选择器！

标签选择器

    <style>
        /*   <!-- 标签选择器 ：写上标签名 -->*/
        p {
            color: green;

        }
        div {
            color: pink;
        }
    </style>

类选择器

    <style>
        /* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 */
        .red {
            color: red;
        }
        .yellow {
            color: yellow;
        }
    </style>

id选择器

 /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }

通配符选择器

* {
      margin: 0 auto;
}

复合选择器之后代选择器

  ol li {
            color: pink;
        }
        ol li a {
            color: rgb(0, 255, 38);
        }
        .nav li a {
            color: pink;
        }

子代选择器【子元素选择器】

  .nav>a {
            color: rgb(0, 128, 15);
        }

并集选择器

 /* 要求2：请把熊大熊二改为红色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
        /* 约定的语法规范，我们并集选择器喜欢竖着写 */
        /* 一定要注意，最后一个选择器 不需要加逗号 */

链接伪类选择器

 /*3.a:hover选择鼠标经过的那个链接*/
        a:hover {
            color: skyblue;
        }

focus选择器

 /*//把获得光标的nput表单元素选取出来*/
        input:focus {
            background-color: pink;
            color: red;
        }