4-2、伪类选择器

4-2、伪类选择器

动态伪类：

这些味蕾并不存在于html中，只有当用户和网站交互的时候才会体现出来。

• 锚点伪类： :link :visited

• 用户行为伪类： :hover :active :focus

  focus在input中，光标选中是的状态。

UI元素状态伪类

我们把 “:enabled” “:disabled” “:checked” 伪类成为UI元素状态伪类。
三个分别是：可输入、不可输入、选中状态。

input{ height: 120px;width: 200px; }
input:enabled{ border: 1px red solid; }
input:disabled{border: 3px blue solid;}
    
  <input type="text">
  <input type="text" >
  <input type="text" disabled="disabled">

CSS3结构选择器

nth选择器：
我们把 :nth 选择器也称为CSS3结构类。
选择方法：

:first-child 选择属于其父元素的首个子元素的每个Element元素。
下面这个例子中1-所有的都会变色，让section变成div时，那么2-1也会变色，所以在实际使用的时候一般是：section > div:first-child ，进行精确控制。

section:first-child{ color: cyan; }
    
  <section>
    <div>1-1</div>
    <div>1-2</div>