伪类

伪类是CSS中不容易定义的一个概念，它

• 有的基于用户操作，比如鼠标悬停于元素上，
• 有的基于元素“自身的”状态，比如表单元素是否选中等，
• 有的基于元素的位置，是第一个还是最后一个，或者第n个，

主要是因为历史原因：最开始只有锚伪类，后面才一点点的加上其他伪类……

锚伪类

用于a标签，它基于用户的鼠标操作，应用得最为广泛，如：

    a:hover{
        color:wheat;
    }

意思是当鼠标悬置（hover）在a标签上时，将这个a标签的颜色变成wheat颜色。除了hover以外，还可以设置：

• link：未访问（点击）过的，默认的样式
• active：点击时使用的样式
• visited：点击过后的样式。有点无语的是：处于隐私保护的目的，a:visited可以使用的样式受到了很多限制（详细）

表单伪类

用于表单元素，它基于表单元素常用的有：

• :disabled：禁用状态时生效

  input:disabled{
      color: blue;
  } 

• :readonly：只读状态时生效
• :enabled：非禁用（默认）状态时生效
• :checked。但是同学们目前学习过的color/background等在checkbox上无效，我们用它紧随的label样式予以演示：

      input:checked + label{
          color: red;
      }

      <label><input type="checkbox" checked /><label>记住我</label></label>
  

和属性选择器相比，有什么不同呢？只有在:checked上才能演示：

• 属性选择器：仅在加载时有效
  
• 表单伪类：能够根据用户的选择相应的改变
  

元素伪类

它基于元素的位置，常用的有：

• :first-child：第一个元素
• :last-child：最后一子元素
• :nth-child(n)：n可以是数字，也可以是odd（奇数）和even（偶数），非常好用！

  li:nth-child(even){

注意：虽然有名称中带着child，但修饰的不是当前元素的子元素，而是元素自己。以列表为例，我们要修饰列表项：

• 正确的写法：

  li:first-child{

• 错误的写法：

  ul:first-child{

由于未指定父元素，@想一想@：比如页面中有多个ul，我们只希望某一个 ul 中的 li 被修饰怎么办？

#order>li:nth-child(even){

再@想一想@：如果使用后代组合，会有什么不同？

伪元素

（按规范）语法上和伪类的区别是使用两个冒号（::）。

也都懒得定义了，直接上代码吧……

first-line/letter

它作用的是元素的第一行或者第一个字母，而不是第一个元素。

    p::first-line {
        color: red;
    }

前后插入

在元素（的内容）前面（before）/后面（after）插入指定的内容。

注意：这里所谓的前/后面，准确的说，指的是元素内部所有子元素的最前/后面。

content可以指定图像：

hr::before {
    content: url(/images/分隔符.png);
}

也可以直接使用文本：

p::after{
    content: "……";

然后使用其他样式的修饰该部分内容：

p::after{
    content: "……";
    color: red;
}

常用于生成图标……

作业

1. 仿照源栈·一起帮的上的a标签设置伪类样式
2. 让表格可以形成“斑马纹”（样式参考）
   
3. 所有段落的第一行字体加大到1.5倍，第一个字加粗
4. HTML5新语义标签summary中的内容，在末尾自动添加一个蓝色的省略号
   

源栈学历

在当前系列 HTML和CSS 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：