当前位置: 首页 > news >正文

CSS进阶篇——伪类 (pseudo classes)

伪类(pseudo classes)要和选择器捆绑使用,用于表示某种状态(state)或关系(relation)。

它的形式是「选择器:冒号:伪类」。

selector:pseudo_class {
    property: value;
}

链接

:link 表示未访问过的链接,:visited 表示访问过的链接。

下面代码会根据链接是否访问过来改变 <a> 标签的字体颜色。

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

动态伪类

动态伪类用于动态改变选择器的属性值。

  • :active - 激活状态,比如链接被点击
  • :hover - 悬浮状态,比如光标划过一个链接
  • :focus - 获取焦点状态,比如选中,或者等待键盘输入

focus 常用于表单元素,但也会用于链接,因为有的用户可能不用鼠标,而是用键盘配合 tab 来切换焦点。

a:active {
    color: red;
}

a:hover {
    text-decoration: none;
    color: blue;
    background-color: yellow;
}

input:focus, textarea:focus {
    background: #eee;
}

第一个子节点

:first-child 用于精确指定第一个子节点。

<body>
    <p>I’m the body’s first paragraph child. I rule. Obey me.</p>
    <p>I resent you.</p>
...

如果我们只想改变第一个 <p> 标签的样式,就可以像下面这样定义 CSS:

p:first-child {
    font-weight: bold;
    font-size: 40px;
}

CSS3 提供了更多的伪类,比如 last-childtarget 以及 first-of-type 等等。

后面会讲到~

相关文章:

  • 基于affine+sift特征提取的图像配准算法matlab仿真
  • 【重温Linux】一、Ubuntu系统一些常识性的东西(这节持续更新)
  • Redis安装,性能优化
  • mysql group_concat 与 union 联合查询漏洞,数据列最大长度为341
  • 机器学习基础:统计量与抽样分布
  • 工作中整理的常用的Linux命令
  • Vue2和Vue3的区别——实例创建、响应式数据代理、v-for和v-if优先级、生命周期
  • 跑步装备推荐:2022年跑步装备选购清单
  • 多线程(进阶)
  • 如何学习HTML5 需要掌握哪些技能
  • Dinky,让 Flink SQL 纵享丝滑
  • Docker | docker容器导出以及常见问题的处理
  • 【云原生之Docker实战】使用Docker部署Pichome个人相册系统
  • JavaScript 33. Promise
  • 探究MYSQL之索引
  • Node.js 入门教程 13 在 Node.js 中从命令行接收输入
  • MyBatis-Plus中的更新操作(通过id更新和条件更新)
  • easy-rules规则引擎最佳落地实践
  • 看我如何连夜自建网站背刺我的求职对手们
  • 027.将有序数组转换为二叉搜索树
  • 第五届传智杯-初赛【B组-题解】
  • 最全面的SpringMVC教程(一)——SpringMVC简介
  • OpenCV-Python小应用(六):车道线检测
  • 微信小程序介绍
  • matlab实现MCMC的马尔可夫转换MS- ARMA - GARCH模型估计