CSS 伪类

div:hover {
  background-color: blue;
}

元素以显示

元素（类似工具提示的效果）：

实例

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

CSS - :first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

匹配首个

元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何

元素：

实例

p:first-child {
  color: blue;
}

p:first-child {
  color: blue;
} 




这是一段文本。

这是一段文本。

结果如图所示：

  

匹配所有

元素中的首个 元素

在下面的例子中，选择器匹配所有

元素中的第一个 元素：

实例

p i:first-child {
  color: blue;
}

亲自试一试

匹配所有首个

元素中的所有 元素

在下面的例子中，选择器匹配作为另一个元素的第一个子元素的

元素中的所有 元素：

实例

p:first-child i {
  color: blue;
}

亲自试一试

CSS - :lang 伪类

:lang 伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，:lang 为属性为 lang="en" 的 元素定义引号：

实例

q:lang(en) {
  quotes: "~" "~";
}




Some text A quote in a paragraph Some text.

在本例中，:lang 为 lang="en" 的 q 元素定义引号：

结果如图：

  

更多实例

为超链接添加不同样式

本例演示如何向超链接添加其他样式。

使用 :focus

本例演示如何使用 :focus 伪类。

所有 CSS 伪类 选择器例子例子描述:activea:active选择活动的链接。:checkedinput:checked选择每个被选中的 元素。:disabledinput:disabled选择每个被禁用的 元素。:emptyp:empty选择没有子元素的每个

元素。:enabledinput:enabled选择每个已启用的 元素。:first-childp:first-child选择作为其父的首个子元素的每个

元素。:first-of-typep:first-of-type选择作为其父的首个

元素的每个

元素。:focusinput:focus选择获得焦点的 元素。:hovera:hover选择鼠标悬停其上的链接。:in-rangeinput:in-range选择具有指定范围内的值的 元素。:invalidinput:invalid选择所有具有无效值的 元素。:lang(language)p:lang(it)选择每个 lang 属性值以 "it" 开头的

元素。:last-childp:last-child选择作为其父的最后一个子元素的每个

元素。:last-of-typep:last-of-type选择作为其父的最后一个

元素的每个

元素。:linka:link选择所有未被访问的链接。:not(selector):not(p)选择每个非

元素的元素。:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个

元素。（以当前匹配到的元素的角度去观察）:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个

元素，从最后一个子元素计数。:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个

元素的每个

元素，从最后一个子元素计数:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个

元素的每个

元素。:only-of-typep:only-of-type选择作为其父的唯一

元素的每个

元素。:only-childp:only-child选择作为其父的唯一子元素的

元素。:optionalinput:optional选择不带 "required" 属性的 元素。:out-of-rangeinput:out-of-range选择值在指定范围之外的 元素。:read-onlyinput:read-only选择指定了 "readonly" 属性的 元素。:read-writeinput:read-write选择不带 "readonly" 属性的 元素。:requiredinput:required选择指定了 "required" 属性的 元素。:rootroot选择元素的根元素。:target#news:target选择当前活动的 #news 元素（单击包含该锚名称的 URL）。:validinput:valid选择所有具有有效值的 元素。:visiteda:visited选择所有已访问的链接。 所有 CSS 伪元素 选择器例子例子描述::afterp::after在每个

元素之后插入内容。::beforep::before在每个

元素之前插入内容。::first-letterp::first-letter选择每个

元素的首字母。::first-linep::first-line选择每个

元素的首行。::selectionp::selection选择用户选择的元素部分。

转自：CSS 伪类