2. CSS选择器

CSS 选择器

选择器（selector），会告诉浏览器：网页上的哪些元素需要设置什么样的样式。比如：p这个选
择器就表示选择页面中的所有的p元素，在选择器之后所设置的样式会应用到所有的p元素上。

1. 简单选择器

• 标签选择器 : 可以根据标签的名字来从页面中选取指定的元素。
• id 选择器 : 可以根据元素的id属性值选取元素。
• class 选择器 : 可以根据元素的class属性值选取元素。

        /* 标签选择器 */
        p{
            color：red；
        }
        /* id选择器 */
        #h3{
            color: orange;
        }
        /* class选择器 */
        .header{
            color:blue;
        }

2. 复杂选择器

• 交集选择器 : 可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。
• 并集选择器 ： 可以同时使用多个选择器，多个选择器将被同时应用指定的样式。
• 后代选择器 : 可以根据标签的关系，为处在元素内部的后代元素设置样式。
• 通配符 : 可以同时选中页面中的所有元素

/*标签p 和.p1的交集*/
p.p1 {
    color: red;
}
.p2.danger {
    color: blue;
}
/*并集选择器 都被选中*/
.p1,
.p2 {
    font-size: 30px;
}
/*后代选择器 空格*/
.p3 a {
    color: red;
}
/** 通配符 选择所有标签*/
* {
    background-color: pink;
}

3. 伪类选择器

• :hover 鼠标进入元素时
• :focus 输入框获得焦点时

 /* :hover 鼠标放到元素时的一种状态,鼠标离开恢复成原本的状态 */
 /* :focus 光标完全进入输入框时的一种状态,鼠标离开恢复成原本的状态 */

 input:hover {
     color: red;
 }

 textarea:hover {
     width: 100px;
     height: 100px;
 }

 input:focus {
     width: 100px;
 }

 textarea:focus {
     color: pink;
 }

<form>
      姓名: <input type="text" value="不凡学院">
      备注: <textarea></textarea>
</form>