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


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

标签选择器

    

类选择器

    

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;
        }