CSS进阶篇——伪类 (pseudo classes)
Posted 老梁写代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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-child，target以及first-of-type等等。
后面会讲到~
以上是关于CSS进阶篇——伪类 (pseudo classes)的主要内容，如果未能解决你的问题，请参考以下文章