大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。
当前系列: HTML和CSS 修改讲义

伪类

伪类是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中的内容,在末尾自动添加一个蓝色的省略号
学习笔记
源栈学历
大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。

作业

觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

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

多快好省!前端后端,线上线下,名师精讲

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

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码